React JS state not updating

Question

I am fetching all of the documents in a collection for firebase cloud firestore. I am using useEffect hook to call a function that fetches all the documents and then set the state with an array of new documents but the state doesn't seem to be updating.

This is the code that fetches and updates the state:

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

And this is the code that renders the blogs:

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

This is how the result currently looks like:

your code doesn't seem much problem. Please do two things to debug. 1) put your fetch implementation inside `useEffect`, don't call as a function, because i suspect you put the implementation in the wrong place. 2) put a console.log inside `.then(queryS => { `. This way you know if this call has been success. — windmaomao, May 08 '21 at 13:52
First, instead of setting the state for each object, map the objects to an array of objects in the format you need, and then do setBlogs just once with the result array. — , May 08 '21 at 13:53

Naren · Answer 1 · 2021-05-08T13:56:02.610

1

Updating state in forEach does not guarantee the state updates. Generate the data first and update the state state later. You can read these answer for more information about running setState inside loops

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

edited May 08 '21 at 13:56

answered May 08 '21 at 13:53

Naren

4,152
3
17
28

`querySnapshot` is not an array and does not have a `map` method. – Patrick Roberts May 08 '21 at 13:53
well, he didn't mentioned that – Naren May 08 '21 at 13:54
1

then declare an array and push the results to the new array. – May 08 '21 at 13:54
OP said they were using firebase. You should have looked up the relevant reference documentation yourself if you didn't know what `querySnapshot` was. – Patrick Roberts May 08 '21 at 13:55
I don't know how firebase `firebase` works , All I can see list, at least you should have mention that. Anyway, update the code, check now – Naren May 08 '21 at 13:58
Thanks, @Naren... The link to the other question was really helpful. Now it makes sense why my code wasn't working – Prabodh May 08 '21 at 14:14

score 1 · Accepted Answer · answered May 08 '21 at 13:53

Change

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

to

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

Calling setBlogs() multiple times and referencing blogs from the closure is going to fail. The reference to blogs from the stale closure does not update each time you call setBlogs(), so the series of state updates will only render the last document iterated in your snapshot, the way you currently have it written.

Thanks a lot. Can you please elaborate on what you mean... I really did;t get why mine doesn't work and yours does — Prabodh, May 08 '21 at 14:12

React JS state not updating

2 Answers2