How to set state after data fetch complete in React

Question

arrayOfIds.forEach((id) => {
      firestore
        .collection("foos")
        .doc(id)
        .get()
        .then((foo) => {
          fooArray.push(foo.data());
        });
    });
console.log(fooArray);
// some output
this.setState({ foos: fooArray });
// but nothing passed to the state

When I console.log fooArray I can see all the data but cant assign it to the state

Firestore returns a Promise, which is being resolved after the setState is called. blog.sessionstack.com/… — k.s.
– k.s., Commented Dec 4, 2020 at 13:38
You will need to setState only after all the queries are complete, which means you wil need to change the structure of this code to use promises correctly. — Doug Stevenson
– Doug Stevenson, Commented Dec 4, 2020 at 16:42

Snake Shadow · Accepted Answer · 2020-12-05 15:15:58Z

3

 for(let id of arrayOfIds) {
     let foo = await firestore
              .collection("foos")
              .doc(id)
              .get();
     fooArray.push(foo.data());
 }
 console.log(fooArray);
 this.setState({ foos: fooArray });

This would set the state with the correct data - you didnt await the Promise returned by firestore but with this it should work.

edited Dec 5, 2020 at 15:15

answered Dec 4, 2020 at 13:49

Snake Shadow

787 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Doug Stevenson Over a year ago

That actually still won't work because the forEach loop does not know to await the results of each iteration. What you've written will log an empty array and not wait for each query to complete.

Matt Welke Over a year ago

I use for-of loops instead of .forEach() when I have sequential async work for this reason.

LeadDreamer Over a year ago

You can also use Promise.all(arrayOfIds.map(...etc...) just to wait for the resulting array of promises to resolve.

Snake Shadow Over a year ago

@DougStevenson you're right, my bad. I will edit my answer.

Collectives™ on Stack Overflow

How to set state after data fetch complete in React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related