在 React Native 中使用带有 Firestore 的 onSnapshot() 复制数据答案

【问题标题】：Duplicated data using onSnapshot() with Firestore in ReactNative在 React Native 中使用带有 Firestore 的 onSnapshot() 复制数据
【发布时间】：2021-01-02 12:54:45
【问题描述】：

我需要一些帮助。当我在 Firestore 中使用 onSnapshot 函数时，显示的数据是重复的。我理解其中的原因，我试图在函数之后清除数组，但它没有帮助。我该如何解决？

这是我的代码：

useEffect(() => {
  setFavoritesData([]);
  setBranch([]);
  if (favorites.length==0){
    setNo(true);
  } else {
    setNo(false);
    setFavoritesData([]);
    favorites.map(link => {
      db.doc(link).get().then(data => {
        setFavoritesData(all => [...all, data.data()]); 
        setBranch(br => [...br, link]);
      });
    });
  }
}, [favorites]);

const query = () => {
    setFavorites([]);
    setBranch([]);
    setFavoritesData([]);
    const clientDoc = db.doc('Clients/' + id.toString());
    return (
        clientDoc.onSnapshot((client) => {
          setFavorites([]);
          setFavorites(client.data().Favourites);
        })
    )
}

【问题讨论】：

您的代码中的setFavoritesData 和setFavorites 是什么？

标签： reactjs firebase react-native google-cloud-firestore

【解决方案1】：

很难理解你想用这段代码实现什么，如果你解释一下你的代码目标可能会更容易。反正..

你应该在 useEffect 中使用 onSnapshot()，然后你可以清理一次数组。快照现在是一个集合，因此您应该映射集合并将元素添加到空数组中。

useEffect(() => {
   if (favorites.length==0){
      setNo(true);
   } else {
      setNo(false);
      firebase.firestore()
      .collection(*your doc*)
      .onSnapshot( snapshot => {
          setFavorites([]);
          snapshot.docs.map((doc) => 
              setFavorites(prevElements => [...prevElements, doc.data().Favourites]);
      }; 
   }
 }, [favorites]);

【讨论】：