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が具体的にいつ反映されるかは今度ゆっくり調べてみよう

スポンサーリンク

React

Posted by tterima