如何反应更新状态？

Question

I'm getting a very strange issue that I don't know how to address.

I've got a fairly straightforward method: When a button is pressed it called toggleInverted()

toggleInverted() {
  if(this.state.inverted){
    this.setState({inverted: false});
  } else{
    console.log("got to else...");
    this.setState({inverted: true});
    console.log(this.state.inverted);
  }
}

The inverted field is initialized in the constructor to false . However the first time I click the button when I load the page, it doesn't correctly reset the state. The output is: got to else... false .

So somehow it is getting into this else statement, executing the setState , and yet not setting inverted to be true...

Is there something about setState that I am missing?

Answer 1

setState may be asynchronous

Meaning you cannot expect the values of this.state to change immediately after setState is called.

To quote the docs :

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value...

---

As an aside, you can figure your code by using the negative expression of the current inverted value as follows:

toggleInverted() {
  this.setState({inverted: !this.state.inverted});
}

Answer 2

setState does not change your components state immediately. Your state change may be asynchronous and thus no guarantee that your console.log statement will print the changed state. setState however does always lead to the render method being called, so if you console log your state inside the render method of your component, your state should be true.

Also, this.setState({inverted: !this.state.inverted}) is a shorter version of your code snippit