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

Question

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

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

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

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

**编辑 - 我也认为这是一个异步问题，所以我使用 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 参考的数据点

标签： javascriptreactjsfirebasefirebase-realtime-database

Answer 1

事实证明，即使有 15 秒的 setTimeout，我的互联网服务非常糟糕/不稳定，超时也不够长。我尝试了 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);