Object appears to be undefined after this.setState

Question

I have been looking around and can't seem to find a solution. Would appreciate any help I could get here.. there's obviously more to the code but I believe my mistakes lie around here somewhere.. I want my allFirebaseItems to be a complete and usable object as soon as possible, but I don't know the way to get it done. I'm happy to provide any additional information required.

constructor(props) {
    super(props);

    this.state = {
      allFirebaseItems: {},
    };
  }

componentDidMount() {
    this.firebaseFetch();
  }

//to get the items from firebase
firebaseFetch = () => {
    const temp = {};
    database.ref(authentification.currentUser.uid).on("value", (snapshot) => {
      snapshot.forEach((category) => {
        category.forEach((date) => {
          if (!temp[date.key]) {
            temp[date.key] = [];
          }
          date.forEach((itemKey) => {
            var valuesToPush = {};
            itemKey.forEach((element) => {
              valuesToPush[element.key] = element.val();
            });
            temp[date.key].push(valuesToPush);
          });
        });
      });

      //gives me the object with the fetched information, works so far
      console.log(JSON.stringify(temp));

      //allFirebaseItems is still undefined and I don't know how to fix it
      this.setState(
        {allFirebaseItems: temp},
      );

    });
  };

Answer 1

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied.

You can't get a immudiate value after setState, because it's asynchronous. Use a callback if needed.