Question

请帮助我，当this.state.isX打印控制台的值始终为true时，我真的不明白。为什么setState在这种情况下不起作用。这是我的源代码？`

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
      isX: true
    };
  }
  handle(){
    this.setState({value: 'X',isX:!this.state.isX});
    console.log(this.state.isX)
  }
  render() {
    return (
      <button className="square" onClick={() =>{this.handle()}}>
        {this.state.value}
      </button>
    );
  }
}

Answer 1

因为setState是异步的。把它想象成Promise：

handle(){
  new Promise((resolve) => {
    setTimeout(() => {
      resolve("success")
    }, 1000)
  }).then(result => {
    console.log(result);
  })
  console.log('this will be printed before "success"')
}

您知道在Promise之后声明的代码会立即执行。与setState相同。

如果您想确保在状态更新后执行代码，请使用回调函数：

handle(){
  this.setState({value: 'X',isX:!this.state.isX}, () => {
    console.log(this.state.isX)
  });
}

链接：

Why setState isn't synchronous.

Answer 2

setState是异步的;你不能立即回读价值集。如果你只是在记录之前用计时器或其他东西等一下，你会发现一切都很好。至少，我是这么认为的。

参考：setState() does not always immediately update the component. It may batch or defer the update until later.

此外，次要性能：不要使用render（）中的箭头函数来绑定;相反，始终将处理程序本身定义为箭头函数。

为什么setState在这种情况下不起作用？

2 个答案: