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

JavaScript React.js

Chloe

2020-05-25

好的,我会尽快解决这个问题,因为它应该很容易解决...

我读过很多类似的问题,答案似乎非常明显。首先,我不需要查找任何东西!但是...我有一个错误,我无法理解如何修复或为什么会发生。

如下:

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

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

第4164篇《为什么调用setState方法不会立即改变状态?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
Stafan路易 2020.05.25

由于setState是异步函数。这意味着在调用setState之后,状态变量不会立即更改。因此,如果要在更改状态后立即执行其他操作,则应在setState更新函数中使用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 //
         });        
      }
   }
樱小胖Mandy 2020.05.25

由于性能考虑,这是设计使然。React中的setState是保证重新渲染Component的功能,这是一个昂贵的CPU进程。因此,它的设计者希望通过将多个渲染动作合而为一进行优化,因此setState是异步的。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android