如何从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

有一件事对我来说很突出，那就是如何处理this。您应该能够使用箭头功能来维护范围：

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>