Why is State always empty?

Question

I have thoroughly gone through all the asked question and none of them apply to my problem directly. I am looping through an array of user ids and matching them to get a user from my firestore db. I get the result back with no problem but when i store it in the state array and run a console log, my state array is always empty. The first console.log works and shows the results from the db.

Here's my code:

const UsersScreen = (props) => {

    const [state, setState] = useState({
        users: []
    });  

    const getUserProfiles = () => {
        let users = [];
        //networkUsers is an array with the ids
        networkUsers.forEach(userId => { 
            db.doc(userId).get().then((doc) => {
                users.push(doc.data());
                console.log('localusers', users)
            }).catch((error) => {
                console.log('caught error', error)
            })
        });

        setState({ users: users });
    };


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

console.log('state', state.users)
}

Please help.

you need to access `state.users`, not `users.push()` and use Spread operator to insert your data and also its better to change `state` and `setState` to different names — zb22, Apr 15 '20 at 11:51
@evolutionxbox Yes it is. What's your reasoning behind not using objects inside useState? — abdi, Apr 15 '20 at 11:53
@zb22 i’m doing this because id rather not setState inside a forloop — abdi, Apr 15 '20 at 11:54
Mainly in useEffects the dependency array does reference equality. So an object makes it harder to use. — evolutionxbox, Apr 15 '20 at 11:55
If the doc call is async then you need to wait for it. This is async 101. — evolutionxbox, Apr 15 '20 at 11:55
Does this answer your question? [How to return values from async functions using async-await from function?](https://stackoverflow.com/questions/49938266/how-to-return-values-from-async-functions-using-async-await-from-function) — evolutionxbox, Apr 15 '20 at 11:56

Samuel Vaillant · Accepted Answer · 2020-04-15T14:48:48.030

The logic that fetches the document from Firestore is asynchronous. The call to setState is synchronous though. It will always before the document has been fetched. The solution would be to fetch the documents then set the state. Here is an example:

const UsersScreen = (props) => {
  const [state, setState] = useState({
    users: [],
  });

  const getUserProfiles = () => {
    Promise.all(networkUsers.map((userID) => db.doc(userId).get()))
      .then((docs) => {
        setState({ users: docs.map((doc) => doc.data()) });
      })
      .catch((err) => {
        console.log("caught error", error);
      });
  };

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

  console.log("state", state.users);
};

The Promise.all call resolves once every user has been fetched from the Firestore (maybe you could fetch them at once though). Once we have the users we loop over them with map to extract the data of the document and set the state. Here is an alternative with async/await:

const UsersScreen = (props) => {
  const [state, setState] = useState({
    users: [],
  });

  const getUserProfiles = async () => {
    try {
      const docs = await Promise.all(
        networkUsers.map((userID) => db.doc(userId).get())
      );

      setState({ users: docs.map((doc) => doc.data()) });
    } catch (err) {
      console.log("caught error", error);
    }
  };

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

  console.log("state", state.users);
};

@abdi Yes, you can use `for await...of` in order to use async await, but then you will need to `setState` for each iteration, so `Promise.all` would be much better https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of — zb22, Apr 15 '20 at 13:28
Yes async/await is possible. I've updated the example with this alternative. — Samuel Vaillant, Apr 15 '20 at 14:49

Why is State always empty?

1 Answers1

Linked