反应：如何更改变量的状态？

问题描述

我已经从Firebase实时数据库中查询了一些数据，现在我正尝试将其添加到变量中。我确信查询有效，因为如果我console.log（dataSnapshot）它将记录正确的数据（即001）。但是，当我尝试使用该数字创建变量时，它不会返回任何内容。

这是我的代码的一部分：

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = { timestamps: [],user: auth().currentUser,serial: "" };
  }

  componentDidMount() {
    const uid = this.state.user.uid;
    console.log(uid);
    const serial = this.state.serial;
    const serialRef = db.ref(uid + "/serial");
    serialRef.once("value").then(function (dataSnapshot) {
      console.log(dataSnapshot.val());
      this.setState({ serial: dataSnapshot.val() });
    });
    console.log(serial);

Here is a screenshot of my console

谢谢！

解决方法

之所以发生这种情况，是因为您要在之前将其状态变量串行记录到控制台中（其值被更改（异步行为））。因此，您将串行变量作为原始变量获取。
如果您希望在setState之后立即用console.log将状态变量序列写入另一个变量，请执行以下操作：

componentDidMount() {
    const uid = this.state.user.uid;
    console.log(uid);
    let serial = this.state.serial;
    const serialRef = db.ref(uid + "/serial");
    serialRef.once("value").then(function (dataSnapshot) {
      console.log(dataSnapshot.val());
      this.setState({ serial: dataSnapshot.val() },() => {
          serial = this.state.serial 
          console.log(serial)
        });
      });
    })
}

setState接受回调作为可选的第二个参数。