使用 firebase 数据库时 this.setState 不起作用

Question

我正在使用状态从 firebase 数据库中获取价值，但我认为这样做时存在一些问题。

const dbRef=firebase.database().ref().child('profiles').child(user.uid).child('displayName') 
dbRef.on('value',snapshot=>{ 
  this.setState({ profile:{ position:snapshot.val() } }) 
}) 
console.log(this.state)

Answer 1

从 Firebase 加载数据和设置 React 的状态都是异步操作。这意味着您的主代码在加载数据或修改状态时继续运行。

通过在当前代码中添加一些简单的日志记录语句，您可以学到很多关于此类异步代码的知识：

const dbRef=firebase.database().ref().child('profiles').child(user.uid).child('displayName') 
console.log("Before starting listener");
dbRef.on('value',snapshot=>{ 
  console.log("Got data, start to set state");

  this.setState({ profile:{ position:snapshot.val() } }, function() {
    console.log("The state has been set");
  }) 

  console.log("Started to set state");
}) 
console.log("After starting listener");

我在setState 中添加的新函数是一个在状态修改后调用的回调，类似于 Firebase 有一个在数据返回后调用的回调。数据库。

当你运行上面的代码时，输​​出是：

开始监听之前

启动监听器后

得到数据，开始设置状态

开始设置状态

状态已设置

这可能不是您期望的顺序，但对于异步操作来说是完全正常的。一旦异步操作完成，您传入的回调函数将在正常操作序列之外调用。

这意味着在设置状态后需要运行的任何代码（这又取决于数据库数据）都需要位于我在上面的代码中添加的内部回调中。