原因是state
的setState
,如果要使用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'/>