Reactでfetch()の後にrender()をしたい

Question

Reactで GETメソッドをfetchで叩いた後にrender()にて描画をしたいと考えています。

しかしながら、やり方がよくわかりません。

やったこととしては、shouldComponentUpdateにてrender()前にthis.stateオブジェクトの変更がなかったらfalseを返すというものです。

shouldComponentUpdate(nextProps, nextState) {
  const propsDiff = _.isEqual(nextProps, this.props);
  const stateDiff = _.isEqual(nextState, this.state);
  return !(propsDiff && stateDiff);
}

しかしながら、render()が実行されてしまいます。

onload時のrender()をfetchが終わるまで防ぐ方法はないのでしょうか？

Answer 1

fetchをPromiseで待って、thenでsetStateすれば、実現できると思いますよ！

追記

  componentDidMount() {
    fetch('http://hoge.com/api').then((response) => {
      this.setState({hoge: response.someValue});
    });
  }

Comments

[van-0215]

Meganezaru様、ありがとうございます！ async/awaitを使うということでしょうか？

宜しければサンプルプログラムを書いていただけますか？

[Meganezaru]

ざっくりとですが・・・回答に追記しました。

Answer 2

ComponentWillMount or ComponentDidMount系で行うとUnmountされたあとにsetStateが行われてメモリーアラートが出る場合があるので
ComponentWillMount() { this._mounted = true }
ComponentWillUnmount() {this._mounted = false}

if(this._mounted) this.setState({HOGEHOGE})

ってやってあげるといいかも！

Comments

[Meganezaru]

そんな挙動があるんですね
勉強になりました！