使用 Effect 和 Firebase 导致无限循环

Question

我正在使用 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 集合引用不断更新是否可能存在问题？任何想法都有帮助！

Answer 1

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

如果您不需要在 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]);

如果只需要在组件挂载时运行效果一次，那么去掉所有的依赖，即使用一个空的依赖数组。

使用 Effect 和 Firebase 导致无限循环

Use Effect and Firebase causing infinite loop

firebase

reactjs

google-cloud-firestore

react-hooks

use-effect