响应将firebase更改侦听器放在组件中的位置

Question

我是firebase的新手，正在尝试链接firebase-database。如果我将以下内容放在渲染函数中：

let temperature = itemsRef.child('current_temperature');
temperature.on("value", function (snapshot) {
          myData = snapshot.val();
          console.log('temp', myData);
});

日志消息显示在控制台中，但我看不到如何在模板中显示它。是否有一个简单的示例组件，如何从此观察器获取更新的值以显示在html中？

Answer 1

将代码移至componentDidMount生命周期挂钩，并在console.log的位置使用绑定this.setState()

componentDidMount() {
  let temperature = itemsRef.child('current_temperature');
  temperature.on("value", (snapshot) => {
    myData = snapshot.val();
    this.setState({
      temp: myData
    });
  });
}