为什么在 React 中有太多的重新渲染？

Question

我在 React 中有以下代码来从 Firebase 获取数据。我是 useEffect 的新手，它给出了太多的重新渲染错误：

let post1 = [];
useEffect(() => {
  getDocs(collection(db, "posts")).then((snapshot) => {
    const data = snapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }));
    post1 = data;
  })
}, [posts]);
setPosts(post1);

Answer 1

按照您编写的方式，setPosts(post1) 会在每次渲染时被调用。我假设 posts 和 setPosts 是从 useState() 值解构的，这意味着每次调用 setPosts() 时，它都会触发重新渲染。您需要将 setPosts() 调用移至 useEffect()。您还需要从 useEffect 的依赖项数组中删除 posts，因为如果这些依赖项中的任何一个发生更改，它也会触发重新渲染。在您的具体情况下，试试这个：

useEffect(() => {
  getDocs(collection(db, "posts")).then((snapshot) => {
    const data = snapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }));
    setPosts(data);
  })
}, []);

为什么在 React 中有太多的重新渲染？

Why getting too many rerenders in react?

javascript

firebase

reactjs

use-effect

use-state