Question

当将新页面添加到Cloud Firestore数据库时，我有一大堆代码可以监听。基本上，它为此使用onSnapshot事件侦听器。

我使用React钩子来存储来自数据库的内容。我注意到的是，当我使用setPages(tmp_array)时，PRINT THIS会继续打印，这使我想到了无限循环，但是网站并没有降低速度。当setPages(tmp_array)被注释时，它仅打印一次，正如我认为的那样。但是我确实需要将数据存储在数组中！仅供参考，此useEffect除外的页面未在其他任何地方使用，除这里以外，我不使用setPages，因此数据并非每次都是“新的”。

const [pages, setPages] = useState([]);

const eventPageListener = pagesRef.onSnapshot(snapshot => {
    console.log('PRINT THIS');
    setPages(snapshot.docChanges().filter(change => change.type === 'added').map(change => change.doc.data()));
  });

  useEffect(() => {
    if (pages.length > 0) {
      eventPageListener();
    }
  }, [pages]);

例外行为是无限循环吗？因为这是我第一次使用侦听器，所以我不太确定。如果每次都调用该网站，这最终不会减慢该网站的速度吗？我还注意到取消订阅是行不通的。我真的觉得我在这里做错了。

Answer 1

如果您尝试模拟只会调用一次的componentDidMount行为，则可以尝试使用useEffect的空数组

  useEffect(() => {
    if (pages.length > 0) {
      eventPageListener();
    }
  }, []); // instead of [pages]

在我的情况下，使用[]停止了无限循环

Firebase onSnapshot函数上的无限循环正常吗？

1 个答案: