为什么调用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; 如果开始为假，即使我未选中该复选框，在我第一次单击时它仍然为假！

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