Data collection from firebase firestore in react native returns undefined outside of promise

Question

This method is supposed to return a list of users but returning an empty array. When I console log inside the forEach loop, it prints the data but not outside of it.

  get getAllUsers() {
    const usersList = [];
    firebase
      .firestore()
      .collection('users')
      .get()
      .then(snapshot => {
        snapshot.forEach(user => {
          usersList.push(user.data());
          console.log(user.data());
        });
      });
    return usersList; // Array [] or undefined when indexed
  }

On Home.js, I call it here.

  componentDidMount() {
    const list = fireStoreDB.getAllUsers;
    console.log(list);
  }

Array [] is the console log of the method and the objects are the console log from the forEach loop.

cccn · Accepted Answer · 2019-11-04 09:59:28Z

3

You got an empty array, because your function is synchronous and firebase returns a promise which is asynchronous. So that's why in most cases you will get an empty array first, and after that response from firebase.

Try this one:

 async getAllUsers() {
   const usersList = await firebase
      .firestore()
      .collection('users')
      .get()
      .then(snapshot => {
        return snapshot.map(user => user.data(););
      });
    return usersList;
  }

And then in Home.js

componentDidMount() {
    fireStoreDB.getAllUsers().then(list => console.log(list));
  }

edited Nov 4, 2019 at 9:59

answered Nov 4, 2019 at 9:04

cccn

9491 gold badge8 silver badges20 bronze badges

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

2 Comments

Wes Over a year ago

I get syntax error with the async on the get function. I tried this which won't work either:

getAllUsers = async () => {     const usersList = await firebase       .firestore()       .collection('users')       .get()       .then(snapshot => {         return snapshot.map(user => user.data());       });     return usersList; // Array [] or undefined when indexed   };

Wes Over a year ago

You're missing docs on snapshot return snapshot.docs.map(user => user.data()); but other than that, thanks for the solution.

Collectives™ on Stack Overflow

Data collection from firebase firestore in react native returns undefined outside of promise

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related