您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

原因是statesetState,如果要使用callback方法检查值,则不能紧随在之后的更新值。传递一个方法作为回调,该方法将在setState完成其任务后执行

为什么setState是异步的?

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

setState()不会立即使this.state突变,而是创建一个挂起的状态转换。调用方法后访问this.state可能会返回现有值。无法保证对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='check@R_585_2419@' 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'/>
其他 2022/1/1 18:13:56 有508人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶