ReactJS:this.setState是否立即生效

Question

>我想知道this.setState是否会立即更改状态，因为它似乎没有这样做。

为了说明这一点，让我们假设有一个复选框。

class Example extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    switch: false
  };
  this.switch = this.switch.bind(this);
}
clickCoverSwitch(){
  console.log("Before clicking - ", this.state.switch);
  this.setState({switch: !this.state.switch});
  console.log("Now, the state is - ", this.state.switch);
}
render() {
    return (
       <input onClick={this.clickCoverSwitch} defaultChecked={this.state.coverSwitch} type="checkbox">
       </input>
    );
}

在此示例中，复选框默认处于关闭状态 - 这是正常的。

但是，当单击开关（即复选框）时，我在控制台中看到以下消息。

Before clicking - false

Now, the state is - false

第二行应该显示true，因为this.state.switch应该通过this.setState({switch: !this.state.switch})更改。

我

不确定我应该如何解释这一点。任何建议将不胜感激！

Answer 1

setState（） 不会立即改变 this.state，但会创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

当基于以前的状态值更改状态时，最好使用以下语法：

this.setState((prevState) => ({ switch: !prevState.switch}));

这样，如果有多个挂起的状态更改，它们不会相互覆盖：

//This way leads to undesirable results
Somefunction() {
  this.setState({ counter: this.state.counter + 3})
  this.setState({ counter: this.state.counter + 5})
}
//this.state.counter === 5 here
betterfunction() {
  this.setState((prevState) => ({ counter: prevState.counter + 3}))
  this.setState((prevState) => ({ counter: prevState.counter + 5}))
}
//The second setState will change based on the first one's values instead of overwritting them
//this.state.counter === 8 here

更多信息在这里： https://facebook.github.io/react/docs/react-component.html#setstate

Answer 2

嗯，这取决于...React 的setState也可能是同步和异步的。触发上下文很重要 - 有关此主题的更多信息，请单击此处

一般规则 - 不要依赖同步setState。如果需要在状态传播时执行操作，请使用setState完成回调（传递给setState的第二个参数）。