react setStateメソッドを呼び出しても状態がすぐに変化しないのはなぜですか？

私はのフォームセクションを読んでいます反応ドキュメントと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コールバック内の2番目valueが最初と同じように出力されますが、コールバックのスコープでconsole.log結果が表示さthis.setState({value: event.target.value})れないのはなぜhandleChangeですか？

Reactのドキュメントから：

setState()すぐには変化しませんthis.stateが、保留中の状態遷移を作成します。this.stateこのメソッドを呼び出した後でアクセスすると、既存の値が返される可能性があります。への呼び出しの同期操作の保証はなくsetState、呼び出しはパフォーマンス向上のためにバッチ処理される場合があります。

状態が変化した後に関数を実行する場合は、コールバックとして渡します。

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

Reactのドキュメントで説明されているように、setState同期的に起動される保証はないため、console.log更新前の状態を返すことができます。

Michael Parkerは、内でコールバックを渡すことについて言及していますsetState。状態変更後のロジックを処理するもう1つの方法は、componentDidUpdateライフサイクルメソッドを使用する方法です。これは、Reactドキュメントで推奨されている方法です。

通常、そのようなロジックではなく、componentDidUpdate（）を使用することをお勧めします。

これはsetState、s が連続して実行される可能性があり、状態が変化するたびに同じ関数を実行したい場合に特に便利です。各setStateにコールバックを追加するのではなく、componentDidUpdate必要に応じて内部に特定のロジックを使用して、内に関数を配置できます。

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

ES7 async / awaitを使用してみてください。たとえばあなたの例を使用して：

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

反応ライフサイクルメソッドに注意！

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

私は数時間働いてgetDerivedStateFromProps、毎回呼び出されることを確認しましたsetState()。

😂

async-await 構文は次のようなものに対して完全に機能します...

changeStateFunction = () => {
  // Some Worker..

  this.setState((prevState) => ({
  year: funcHandleYear(),
  month: funcHandleMonth()
}));

goNextMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

goPrevMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

単に置く-this.setState（{data：value}）は本質的に非同期です。つまり、コールスタックから移動し、解決されない限り、コールスタックに戻るだけです。

イベントループを読んで、JSの非同期の性質と、更新に時間がかかる理由を明確に理解してください-

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

したがって-

    this.setState({data:value});
    console.log(this.state.data); // will give undefined or unupdated value

更新には時間がかかるので。上記のプロセスを達成するために-

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