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

Question

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

好吧，我试着快点，因为这应该是个简单的解决办法.

我读过许多类似的问题，答案似乎很明显。从一开始我就没必要抬头看了！但是.。我有一个错误，我不知道如何修复或它发生的原因。

详情如下：

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)}

所以我有那两个人console.log()两者应该是相同的。我实际上是将状态设置为与event.target.checked在上面的那条线上！

但是它总是返回它应该返回的相反的东西。

当我使用!this.state.barClubLounge如果它启动为false，则在我第一次单击时，它仍然是false，即使复选框是否选中也是基于状态的！

这是一个疯狂的悖论，我不知道发生了什么，请帮助！

Answer 1

因为setState是一个异步函数。这意味着在调用setState之后，状态变量不会立即改变。因此，如果要在更改状态后立即执行其他操作，则应在setStateUPDATE函数中使用setstate的回调方法。handleOnChange = (event) => {       let inputState = event.target.checked;       if(event.target.className == "barClubLounge") {          this.setState({ barClubLounge: inputState}, () => {  //here              console.log(this.state.barClubLounge);              //here you can call other functions which use this state               variable //          });               }    }

Answer 2

这是出于性能考虑而设计的.反应中的setState是一个函数保以重新呈现组件，这是一个昂贵的CPU进程。因此，它的设计者希望通过将多个呈现操作聚集到一个中来进行优化，因此setState是异步的。