-1

I am making a login button with firebase authentication that references my firebase realtime database in the promise. When I try to lift that data to change component state, it becomes null.

I tried a simpler approach where I declare a variable outside the firebase reference, then try to set that variable within the function.

I also tried setting "that" as an empty array variable, then accessing it as an array.

I tried setting "that" to this.state.ign, but when I try to access the data I need, it becomes null

**edit - I also thought it was an asynchronous issue, so I used a setTimeout 15000 to allow 15 seconds to go by before trying to console.log outside of the firebase reference.

 var that = this;
 firebase.database().ref("users/" + this.state.userid).on("value", function (snapshot) {

      var userIGN = (snapshot.val().ign);

      console.log(userIGN); // WORKS - gives ign from database 

      that.setState({ ign: userIGN }); // WORKS - sets that.state.ign to ign from database 

      console.log(that.state.ign); // WORKS - gives ign from that.state 
    })

    console.log(that); // WORKS - shows object that has state with ign

    console.log(that.state); // FAIL - shows state object, but ign is null now?!

The second console.log(that.state.ign) should show the data point from the firebase reference

Nicholas Chan
  • 1
  • 1
  • Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Blue Feb 05 '19 at 00:03
  • I tried setTimeout 15000 as well. Forgot to list I tried that too! – Nicholas Chan Feb 05 '19 at 00:08
  • Wow, okay so I set my timeout to 30000 and now it works! So IT WAS an async problem!! Blast this terrible internet speed! *Thanks @FrankerZ – Nicholas Chan Feb 05 '19 at 00:14
  • Hold up. You missed the point. Firebase is asynchronous and data will only be valid inside the closure. The code after that will execute way before data returns from Firebase. Do NOT rely on delays or time outs to get your data - it can vary wildly. See [this answer](https://stackoverflow.com/questions/48720701/how-to-handle-asynchronous-database-with-firebase) and also [this super good answer](https://stackoverflow.com/questions/44459797/android-firebase-synchronous-for-into-an-asynchronous-function) and even [here](https://stackoverflow.com/questions/46252420/firebase-query-help-me) – Jay Feb 05 '19 at 16:54

1 Answers1

-2

It turns out even with a 15 sec setTimeout, with my very bad/choppy internet service, the timeout was not long enough. I tried 30 sec and I am able to access the data!

var that = this;
    firebase.database().ref("users/" + this.state.userid).on("value", function (snapshot) {
      var userIGN = (snapshot.val().ign);
      console.log(userIGN); // WORKS - gives ign from database 
      that.setState({ ign: userIGN }); // WORKS - sets that.state.ign to ign from database 
      console.log(that.state.ign); // WORKS - gives ign from that.state 
    })
    setTimeout(() => {
      console.log(that); // WORKS - shows object that has state with ign
      console.log(that.state.ign); // WORKS NOW!!
    },30000);
Nicholas Chan
  • 1
  • 1