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

IT技术 javascript html reactjs event-handling
2021-02-05 04:07:17

好的，我会尽量快点，因为它应该很容易解决......

我已经阅读了一堆类似的问题，答案似乎很明显。没有什么我首先需要查找的！但是......我有一个错误，我无法理解如何修复或为什么会发生。

如下：

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；如果它开始为假，在我第一次点击时它仍然是假的，即使复选框是否被选中是基于状态的！！

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

3个回答

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

为什么 setState 是异步的？

这是因为setState改变state并导致重新渲染。这可能是一项昂贵的操作，并且synchronous可能会使浏览器无响应。因此，为了更好的 UI 体验和性能，setState调用asynchronous以及批处理。

从文件：

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。无法保证对 setState 调用的同步操作，并且可能会批量调用以提高性能。

使用带有 setState 的回调方法：

要检查紧跟state在 之后的更新值setState，请使用如下回调方法：

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'/>

因为 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 //
         });        
      }
   }

这是出于性能考虑而设计的。React 中的 setState 是一个保证重新渲染 Component的函数，这是一个代价高昂的 CPU 过程。因此，它的设计者希望通过将多个渲染操作合二为一来进行优化，因此 setState 是异步的。

其它你可能感兴趣的问题
上一篇jQuery .live() vs .on() 加载动态 html 后添加点击事件的方法 下一篇你如何在 JavaScript 中获得时间戳？