Javascript 如何从firebase实时更新状态？|react.js

我有一个html元素，每次Firebase发生变化时都需要更新。到目前为止，我所做的是实现这个特定功能：

componentWillMount() {
    var that = this;
    var updateDb = firebase.database().ref("currentToken");
    updateDb.on("value", function(snapshot) {
        that.setState({ currentToken: snapshot.val() });
    });
    console.log(that.state.currentToken);
    document.getElementById("tokenField").innerHTML = "Current Token: " + that.state.currentToken;
}

---

当Firebase发生变化时，更新我的应用程序中变量的正确方法是什么？请给出任何建议，以改善我的编码，因为我是一个初学者

对我来说最突出的一件事是你如何处理这件事。您应该能够使用来维护范围：

updateDb.on("value", (snapshot) => {
  this.setState({ currentToken: snapshot.val() });
});

另一件突出的事情是

document.getElementById("tokenField").innerHTML =
  "Current Token: " + that.state.currentToken;

调用

setState

时，React不会更新该元素。React将通过调用

render

方法来更新任何需要

state

的组件。我不知道代码的其余部分是什么样子的，但是假设您正在渲染的是一个组件，您应该在

render

中更新它，如下所示：

<div id="tokenField">
    Current token {this.state.currentToken}
</div>

当前令牌{this.state.currentToken}