React JS 状态不更新

Question

我正在为 firebase 云 Firestore 获取一个集合中的所有文档。我正在使用 useEffect 挂钩调用一个函数来获取所有文档，然后使用一组新文档设置状态，但状态似乎没有更新。

这是获取和更新状态的代码：

const fetchBlogs = () => {
        db.collection('blogs').get().then(querySnapshot => {
          querySnapshot.forEach(doc => {
            setBlogs([...blogs,{
              title:doc.data().title,
              imgURL: doc.data().imgURL,
              desc: doc.data().desc
            }])
          });
        });
    }

    useEffect(() => {
        fetchBlogs();
    },[]);

这是呈现博客的代码：

{
  blogs && blogs.map(blog=>{
    return(
      <Article
         key={blog.title}
         title={blog.title}
         imgurl = {blog.imgURL}
         desc={blog.desc}
       />
    )
  })
}

这是当前结果的样子：

Answer 1

在 forEach 中更新 state 并不能保证状态更新。先生成数据，再更新状态state。您可以阅读了解有关运行 setState 内部循环

的更多信息

const fetchBlogs = () => { // You can also move this inside `useEffect` incase if it's not reused. 
  db.collection('blogs').get().then(querySnapshot => {
    const querySnapshots = [] 
    querySnapshot.forEach(doc => {
      const { title, imgURL, desc } = doc.data()
      querySnapshots.push({ title, imgURL, desc })
    });
    setBlogs([...blogs, ...querySnapshots])
  });
  
}

useEffect(() => {
   fetchBlogs();
},[]);

Answer 2

改变

querySnapshot.forEach(doc => {
  setBlogs([...blogs,{
    title: doc.data().title,
    imgURL: doc.data().imgURL,
    desc: doc.data().desc
  }])
});

至

setBlogs(
  querySnapshot.docs.map(doc => ({
    title: doc.data().title,
    imgURL: doc.data().imgURL,
    desc: doc.data().desc
  }))
);

多次调用 setBlogs() 并从闭包中引用 blogs 将会失败。每次调用 setBlogs() 时，陈旧闭包对 blogs 的引用不会更新，因此状态更新系列只会呈现快照中迭代的最后一个文档，这是您当前编写的方式。

React JS 状态不更新

React JS state not updating

javascript

reactjs

google-cloud-firestore

react-hooks

react-state