Javascript 反应JS状态不更新

Javascript 反应JS状态不更新,javascript,reactjs,google-cloud-firestore,react-hooks,react-state,Javascript,Reactjs,Google Cloud Firestore,React Hooks,React State,我正在获取firebase cloud firestore集合中的所有文档。我使用useEffect钩子调用一个函数,该函数获取所有文档,然后使用一组新文档设置状态,但状态似乎没有更新 这是获取和更新状态的代码: const fetchBlogs = () => { db.collection('blogs').get().then(querySnapshot => { querySnapshot.forEach(doc => {

我正在获取firebase cloud 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}
       />
    )
  })
}

{
blogs&&blogs.map(blog=>{
返回(

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();
},[]);
改变

querySnapshot.forEach(doc=>{
日志([…博客{
标题:doc.data().title,
imgURL:doc.data().imgURL,
desc:doc.data().desc
}])
});

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

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

您的代码似乎没有太大问题。请执行两项调试操作。1)将fetch实现放在
useffect
中,不要作为函数调用,因为我怀疑您将实现放在了错误的位置。2)将console.log放在
中。然后(queryS=>{
。这样你就知道这个调用是否成功了。首先,不要为每个对象设置状态,而是将对象映射到一个你需要的格式的对象数组,然后对结果数组执行一次setblog。
querySnapshot
不是数组,也没有
map
方法。好吧,他当时没有提到这一点声明一个数组并将结果推送到新数组。是的,可以这样做,让我更新一下,P说他们正在使用firebase。如果你不知道什么是
querySnapshot
,你应该自己查阅相关的参考文档。非常感谢。你能详细说明一下你的意思吗……我真的不明白为什么我的不起作用你的呢