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

问题描述

我正在阅读部分class =post-tagtitle =show questions tagged'reactionjs' =tag> reactjs 文档，并尝试使用此代码演示 onChange 用法（）。

I'm reading Forms section of reactjs documentation and just tried this code to demonstrate onChange usage (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 /> 浏览器中的值， handleChange 回调中的第二个 console.log 打印相同的 value 作为第一个 console.log ，为什么我看不到 this.setState（{value的结果：event.target.value}）在 handleChange 回调范围内？

When I update the <input/> value in the browser, the second console.log inside the handleChange callback prints the same value as the first console.log, Why I can't see the result of this.setState({value: event.target.value}) in the scope of handleChange callback?

推荐答案

来自React的 ：

如果你想在状态发生变化后执行一个函数，请将其作为回调传递。

If you want a function to be executed after the state change occurs, pass it in as a callback.

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

这篇关于为什么调用react setState方法不会立即改变状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！