Question

我遇到了一个非常奇怪的问题，我不知道如何处理。

我有一个相当简单的方法：当按下按钮时，它会调用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);
  }
}

反转字段在构造函数中初始化为false。但是，当我第一次单击加载页面时按钮时，它没有正确重置状态。输出是： got to else... false。

所以不知何故它进入了这个else语句，执行setState，但没有设置倒置为真......

我遗失了setState的某些内容吗？

Answer 1

setState may be asynchronous

意味着您无法在this.state被调用后立即更改setState的值。

引用docs：

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值......

另外，您可以使用当前反转值的否定表达式来计算代码，如下所示：

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

Answer 2

setState不会立即更改您的组件状态。您的状态更改可能是异步的，因此无法保证您的console.log语句将打印已更改的状态。但setState总是导致调用render方法，因此如果您在组件的render方法中控制日志状态，那么您的状态应为真。

此外，this.setState({inverted: !this.state.inverted})是代码snippit的缩写版本

如何更新状态？

2 个答案: