为什么调用setState方法不会立即改变状态？

Question

好吧，我会尽快解决的，因为这应该是一个很容易的解决办法...

我读过一堆类似的问题，答案似乎相当明显。从一开始我就不用抬头看了！但是...我有一个错误，我无法理解如何修复或为什么它会发生。

具体如下：

class NightlifeTypes extends Component {
constructor(props) {
    super(props);

    this.state = {
        barClubLounge: false,
        seeTheTown: true,
        eventsEntertainment: true,
        familyFriendlyOnly: false
    }
    this.handleOnChange = this.handleOnChange.bind(this);
}

handleOnChange = (event) => {   
    if(event.target.className == "barClubLounge") {
        this.setState({barClubLounge: event.target.checked});
        console.log(event.target.checked)
        console.log(this.state.barClubLounge)
    }
}

render() {
    return (
        <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>
    )
}

handleOnChange = (event) => {   
if(event.target.className == "barClubLounge") {
    this.setState({barClubLounge: !this.state.barClubLounge});
    console.log(event.target.checked)
    console.log(this.state.barClubLounge)
}

Answer 1

原因是setState是异步的，如果要检查值，请使用callback方法，则不能期望在setState之后出现更新的state值。传递一个方法作为回调，该方法将在setstate完成任务后执行。

为什么setState是异步的？

这是因为setstate会更改state并导致重新呈现。这可能是一个昂贵的操作，使其同步可能会使浏览器没有响应。因此，setstate调用是异步的，并且是批处理的，以获得更好的UI体验和性能。

要在setstate之后检查更新的state值，请使用如下所示的回调方法：

setState({ key: value }, () => {
     console.log('updated state value', this.state.key)
})

检查以下内容：

class NightlifeTypes extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         barClubLounge: false,
         seeTheTown: true,
         eventsEntertainment: true,
         familyFriendlyOnly: false
      }
   }

   handleOnChange = (event) => {  // Arrow function binds `this`
      let value = event.target.checked;

      if(event.target.className == "barClubLounge") {

         this.setState({ barClubLounge: value}, () => {  //here
             console.log(value);
             console.log(this.state.barClubLounge);
             //both will print same value
         });        

      }
   }

   render() {
      return (
          <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>
      )
   }
}

ReactDOM.render(<NightlifeTypes/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>