React：如何更改变量的 state？

Question

I've queried some data from Firebase realtime database and now I'm trying to add it to a variable. I'm sure that the querying works, because if I console.log(dataSnapshot) it logs the correct data (which is 001). However, when I'm trying to create a variable out of that number it doesn't return anything.

Here is a part of my code:

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

Thanks in advance!

Answer 1

This is happening because you are logging your state variable serial to the console before its value is getting changed(asynchronous behaviour). Hence you are getting your serial variable as the original one.
If you wish to console.log your state variable serial in another variable immediately after setState then do the following:

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 accepts a callback as an optional second parameter.