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

Question

我有一个 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 发生更改时，更新应用中的变量的正确方法是什么？由于我是初学者，请提出任何改进我的编码的建议。

Answer 1

对我来说最突出的一件事是您如何处理这个。您应该能够使用 arrow function维持范围:

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>