使用 Effect 和 Firebase 导致无限循环答案

【问题标题】：Use Effect and Firebase causing infinite loop使用 Effect 和 Firebase 导致无限循环
【发布时间】：2022-01-15 10:20:21
【问题描述】：

我正在使用 firebase 并尝试使用以下代码在应用程序启动时加载我的所有数据：

const [books, setBooks] = useState<BookType[]>([]);
const bookCollectionRef = collection(db, "books");

useEffect(() => {
  const getBooks = async () => {
    const data = await getDocs(bookCollectionRef);
    const temp: BookType[] = data.docs.map((doc) => {
      const book: BookType = {
        //set properties
      };
      return book;
    });
    setBooks(temp);
  };

  getBooks();
}, [bookCollectionRef]);

这个 useEffect 不断地运行，让我相信我已经做了一个无限循环。我不明白为什么会发生这种情况，因为我认为我没有在 useEffect 挂钩内更新bookCollectionRef。 Firebase集合引用不断更新是否可能存在问题？任何想法都有帮助！

【问题讨论】：

你需要运行多少次？
@Jamal 一次
ok 将依赖项留空，如下所示：useEffect(() => { const getBooks = async () => { const data = await getDocs(bookCollectionRef); const temp: BookType[] = data. docs.map((doc) => { const book: BookType = { //set properties }; return book; }); setBooks(temp); }; getBooks(); }, [])

标签： reactjs firebase google-cloud-firestore react-hooks use-effect

【解决方案1】：

据我所知，collection(db, "books") 可能会在每次组件重新呈现时返回一个新的集合引用。每当组件呈现（由父级重新呈现、props 更新或更新本地 books 状态触发）时，新的 bookCollectionRef 引用都会触发 useEffect 挂钩回调并更新 @987654326 @state，从而触发重新渲染。冲洗并重复。

如果您不需要在 useEffect 挂钩之外引用集合，则只需省略 bookCollectionRef 并直接引用集合。仅当db 值更新时触发useEffect。

const [books, setBooks] = useState<BookType[]>([]);

useEffect(() => {
  const getBooks = async () => {
    const data = await getDocs(collection(db, "books"));
    const temp: BookType[] = data.docs.map((doc) => {
      const book: BookType = {
        //set properties
      };
      return book;
    });
    setBooks(temp);
  };

  getBooks();
}, [db]);

如果您只需要在组件挂载时运行一次效果，则删除所有依赖项，即使用一个空的依赖项数组。

【讨论】：

有道理！感谢您的详细回复！