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

Question

我正在阅读reactjs文档的Forms部分，并尝试使用此代码演示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')
);

当我在浏览器中更新值时，HandleChange回调中的第二个console.log将打印与第一个console.log相同的值，为什么我在HandleChange回调范围内看不到this.setState（{value:event.target.value}）的结果？

Answer 1

您可以尝试使用ES7 async/await。 例如，使用您的示例:

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

Answer 2

正如React文档中提到的，不能保证setstate会被同步激发，因此您的console.log可能会返回更新之前的状态。

MichaelParker提到在setstate中传递回调。 处理状态更改后的逻辑的另一种方法是通过ComponentDidUpdate生命周期方法，这是React Docs中推荐的方法。

通常，我们建议对此类逻辑使用componentDidUpdate（）。

当可能连续激发setstates，并且您希望在每次状态更改后激发相同的函数时，这特别有用。 不是向每个setState添加回调，而是可以将函数放在ComponentDidUpdate中，必要时在其中添加特定的逻辑。

// example
componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.foo();  
  }
}

Answer 3

来自React的文档:

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

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

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