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

Question

我正在阅读reactjs文档的Forms部分,并尝试使用此代码来演示用法(JSBIN).onChange

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

从React的文档:

setState()不会立即变异this.state但会创建待定状态转换.this.state调用此方法后访问可能会返回现有值.无法保证呼叫的同步操作,setState并且可以对呼叫进行批处理以获得性能提升.

如果要在状态更改发生后执行函数,请将其作为回调传递.

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

Answer 2

如React文档中所述,无法保证setState同步触发,因此您console.log可以在更新之前返回状态.

迈克尔帕克提到通过内部的回调setState.在状态更改之后处理逻辑的另一种方法是通过componentDidUpdate生命周期方法,这是React docs中推荐的方法.

通常我们建议使用componentDidUpdate()代替这种逻辑.

当可能连续setState触发时,这特别有用,并且您希望在每次状态更改后触发相同的函数.setState您可以将函数放在其中componentDidUpdate,而不是向每个函数添加回调,如果需要,可以使用特定逻辑.

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

Answer 3

您可以尝试使用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 4

有时状态会出现此问题。
如果是钩子，你应该使用useEffect钩子，如下所示-

const [fruit, setFruit] = useState('');
 
setFruit('Apple');
useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])

这拯救了我的一天，希望能帮助你！

Answer 5

当心反应生命周期方法吗？

• http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• https://reactjs.org/docs/react-component.html

我工作了几个小时，才发现getDerivedStateFromProps以后每次都会打电话setState()。