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

我正在阅读reactjs文档的表单部分,并尝试用这段代码演示onChangeusage(JSBIN)

var React=require('React');
var ControlledForm=React.createClass({
getInitialState:函数(){
返回{
值:“初始值”
};
},
handleChange:函数(事件){
console.log(this.state.value);
this.setState({value:event.target.value});
console.log(this.state.value);
},
render:function(){
返回(
<input type=“text”value={this.state.value}onChange={this.handleChange}/>
);
}
});
反应(
<ControlledForm/>,
document.getElementById('mount')
);

当我更新时<输入/&gt值在浏览器中,handleChange回调中的第二个console.log打印与第一个console.log相同的value,为什么我在handleChange回调的范围内看不到this.setState({value:event.target.value})的结果

从React的文档中:

setState()不会立即改变此.state,但会创建一个
等待状态转换。调用此函数后访问此.state

方法可能返回现有值。没有
保证对setState的调用和调用的同步操作
为提高性能而进行批处理

如果希望在状态更改发生后执行函数,请将其作为回调传入

this.setState({value:event.target.value},函数(){
console.log(this.state.value);
});

发表评论