时间戳

首页 > 解决方案 > React：如何改变变量的状态？

javascript - React：如何改变变量的状态？

问题描述

我已经从 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);

这是我的控制台的屏幕截图

提前致谢！

标签： javascriptreactjssetstate

解决方案

发生这种情况是因为您在更改其值（异步行为）之前将状态变量串行记录到控制台。因此，您将串行变量作为原始变量。
如果您希望在 setState 之后立即将您的状态变量 serial 记录到另一个变量中，请执行以下操作：

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 接受回调作为可选的第二个参数。

推荐阅读