Javascript 反应JS状态不更新
我正在获取firebase cloud firestore集合中的所有文档。我使用useEffect钩子调用一个函数,该函数获取所有文档,然后使用一组新文档设置状态,但状态似乎没有更新 这是获取和更新状态的代码: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 => {
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
,你应该自己查阅相关的参考文档。非常感谢。你能详细说明一下你的意思吗……我真的不明白为什么我的不起作用你的呢