时间戳

首页 > 解决方案 > React + Firestore 读取数据无限结果

javascript - React + Firestore 读取数据无限结果

问题描述

我正在尝试使用 React JS 从 Firestore 中的集合中获取所有文档。最初我有这个直接来自 Firebase 文档的代码：

db.collection("articles").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(doc.id, " => ", doc.data());
    });
  });

当我在控制台中记录它时，它会打印每个文档两次。另外，当我将代码更改为此：

const [headlines, setHeadlines] = useState([])
  db.collection("articles").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        // doc.data() is never undefined for query doc snapshots
        setHeadlines(prevHeadlines => [...prevHeadlines, doc.data().article1])
    });
  });

当我记录数组标题的长度时，它似乎在无限增加，它没有停止并继续前进。数据库中只有 14 个文档，因此数组中不可能有那么多元素。我是 React JS 的新手，任何帮助将不胜感激。

标签： javascriptreactjsfirebasegoogle-cloud-firestore

解决方案

此代码在哪里，尤其是该 db.collection()部分？

如果它useEffect()不在挂钩中，它将在每次组件渲染时运行。由于它会改变状态（setHeadlines），因此每次db.collection()...运行时都会改变状态；每次它改变状态时都会重新渲染，所以......

既然你写了它，setHeadlines(`prevHeadlines => [...prevHeadlines, doc.data().article1])它就会永远添加collection().get()到以前的标题中。

推荐阅读