如何将 snapshot.val() 中的数据提升到组件的状态？

Question

我正在制作一个带有 firebase 身份验证的登录按钮，该按钮在 promise 中引用了我的 firebase 实时数据库。当我尝试提升该数据以更改组件状态时，它变为空。

我尝试了一种更简单的方法，在 firebase 引用之外声明一个变量，然后尝试在函数中设置该变量。

我还尝试将“that”设置为空数组变量，然后将其作为数组访问。

我尝试将“that”设置为 this.state.ign，但是当我尝试访问所需的数据时，它变为 null

**edit - 我也认为这是一个异步问题，所以我使用了 setTimeout 15000 来允许 15 秒过去，然后再尝试在 firebase 参考之外使用 console.log。

 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?!

第二个 console.log(that.state.ign) 应该显示来自 firebase 参考的数据点

Answer 1

事实证明，即使设置超时时间为 15 秒，但我的互联网服务非常糟糕/不稳定，超时时间还不够长。我试了 30 秒，我可以访问数据了！

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);