ReactではsetStateは即座に反映されない
React
ではsetState
で変更された内容はどうやら、render
されるまで反映されないらしい。
試しに以下のコードを試してみる。
class SetStateSample extends React.Component { constructor(props) { super(props) this.state = { val: "" } } handleClick() { this.setState({val: "test"}) alert(this.state.val) // "" } render() { return ( <h1 onClick={this.handleClick.bind(this)}}>{this.state.val}</h1> ) }}
上の例ではsetState前の値がalertにより表示される。
そのため、初回のalertでは初期値が表示される。
alertの時点でthis.state.val
の値を正しく取得したい場合は以下のようにhandleClick
を修正する。
handleClick() { var new_val = "test" this.setState({val: new_val}) alert(new_val) // "test"}
つまり変数に入れてalertに入れるだけ。
これで想定したとおりの処理になる。
setState直後にstateが更新されない原因
React公式ページに以下の通りの記載がある。
https://ja.reactjs.org/docs/faq-state.html
setState
呼び出しは非同期です。呼び出し直後からthis.state
が新しい値を反映することを期待しないでください。もし現在の state に基づいた値を計算する必要がある場合は、オブジェクトの代わりに更新関数を渡してください。
setState
の呼び出しが非同期なので、setState
直後には反映されていなかったんですね。
仮に現在のstateをもとに新しいstateに更新する場合は以下のように記載しましょう。
handleClick() { this.setState((state) => return { val: state.val + "test" } }); }