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

Question

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

我在读表格.段反应Js文档，并尝试使用此代码演示onChange使用(JSBIN).

var React= require('react');var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: "initial value"
        };
    },

    handleChange: function(event) {
        console.log(this.state.value);
        this.setState({value: event.target.value});
        console.log(this.state.value);

    },

    render: function() {
        return (
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        );
    }});React.render(
    <ControlledForm/>,
  document.getElementById('mount'));

当我更新<input/>值在浏览器中，第二个console.log内部handleChange回调打印相同value作为第一个console.log为什么我看不到this.setState({value: event.target.value})在.范围内handleChange回调？

Answer 1

从反应文献资料:setState()不会立即变异this.state但是创建一个挂起的状态转换。存取this.state调用此方法后，可能会返回现有值。调用的同步操作没有保证。setState为了提高性能，呼叫可能会被批处理。如果希望在发生状态更改后执行函数，请将其作为回调传递进来。this.setState({value: event.target.value}, function () {     console.log(this.state.value);});

Answer 2

您可以尝试使用ES7异步/等待。例如，使用您的示例：handleChange: async function(event) {     console.log(this.state.value);     await this.setState({value: event.target.value});     console.log(this.state.value);}