为什么调用反应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')
);

当我更新




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 是同步触发的，因此您的控制台.log可能会在更新之前返回状态。

Michael Parker提到在＜code＞setState＜code＞中传递回调。处理状态更改后的逻辑的另一种方法是通过componentDidUpdate生命周期方法，这是React文档中推荐的方法。

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

当可能有连续的< code>setState被触发，并且您想在每次状态改变后触发相同的函数时，这特别有用。您可以将函数放在< code>componentDidUpdate中，并在必要时在其中添加特定的逻辑，而不是向每个< code>setState添加回调。

// 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);
});