☰

react setState メソッドを呼び出しても状態がすぐに変更されないのはなぜですか? 質問する

tag-icon • tag-icon javascript reactjs
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内の2 番目は最初のものとhandleChange同じものを出力します。コールバックのスコープ内での結果が表示されないのはなぜですか?valueconsole.logthis.setState({value: event.target.value})handleChange

ベストアンサー1

Reactのドキュメンテーション:

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

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

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

おすすめ記事