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

对我来说最重要的一件事是您如何处理this。您应该可以使用arrow function来维护范围：

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

与众不同的另一件事是

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

调用setState时，React不会更新该元素。 React将通过调用state方法来更新所有需要render的组件。我不知道其余代码的样子，但是假设这是您要呈现的组件，则应在render中对其进行更新，如下所示：

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

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

1 个答案: