最終更新:2022-12-16 (金) 05:37:20 (489d)  

this.setState
Top / this.setState

コンポーネントの state への変更をエンキュー

React.Component.setState

メモ

  • コンポーネントを更新するための即時のコマンドではなく、要求として考えてください。
↑

呼び出し方

↑

オブジェクトを受け取る 

  • this.setState({quantity: 2})
↑

stateのマージ

  • 自動的に部分的な state を現在の state にマージする
  • マージは浅く (shallow) 行われるので 
    this.state={aa:"aa",bb: "bb"}
  • のとき 
    this.setState({bb:"cc"})
  • はbbだけ更新する
↑

関数を受け取る 

  • setState(updater[, callback])
↑

updaterのシグネチャ

  • 更新時のstate, propsを受け取りstateの変更点を返す 
    (state, props) => stateChange
  • stateChangeの値はstateと浅くマージされる
↑

更新は非同期に行われるので注意

  • https://ja.reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
  • this.props と this.state は非同期に更新されるので次のstateを求めるときにthis.propsとthis.stateに依存するべきではない 
    // Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});
  • 正しい方法：
    • 前の state を最初の引数として受け取り、更新が適用される時点での props を第 2 引数として受け取ります：
    // Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
↑

setState が誤った値を返すのはなぜですか？

  • https://ja.reactjs.org/docs/faq-state.html
  • React では、this.props と this.state のいずれも、レンダーされたもの、つまりスクリーン上の値を表しています
  • setState 呼び出しは非同期です。呼び出し直後から this.state が新しい値を反映することを期待しないでください。
    • コンポーネントが再レンダリングされるまでstateは更新されない
  • もし現在の state に基づいた値を計算する必要がある場合は、オブジェクトの代わりに更新関数を渡してください



検索：