【React】「Warning: setState(…): Can only update a mounted or mounting component.」警告の対処法

Warning なのですが、頻発するため流石に直さなければ…ということで対応しました。
ReactsetState() に関連したエラーなのですが…正直なところ、いまいちよく分からないまま修正しました…。

警告メッセージの全文はこちら。

Warning: setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the [コンポーネント名] component.

マウントされていないコンポーネントで setState() を読んでしまっていることが原因らしいのですが、なんかやったっけ…?

今回参考にさせていただいたサイトはこちら。
いつもお世話になっている Stack Overflow に投稿された記事です。

reactjs – setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op – Stack Overflow
https://stackoverflow.com/questions/34544314/setstate-can-only-update-a-mounted-or-mounting-component-this-usually-mea

 

対処方法ですが、下記の方法で対応しました。
なお、下記のコードはサイトに載っていたものをそのまま転載させていただいています。

myMethod(){
  if (this.refs.myRef) 
   this.setState({myVar: true});
}

render() {
  return (
    <div ref="myRef">
      {this.state.myVar}
    </div>
  );
}

コンポーネントに ref="myRef" を割り当てて、この ref="myRef" が指定されたコンポーネントが存在するかを確認してから setState() を実行すると正常に動作するとのことでした。
上記を参考に、setState() を行う前後の処理を丸ごと上記の if 文で囲い、再度実行したところ、警告が発生しなくなりました!

 

以上、React で「Warning: setState(…): Can only update a mounted or mounting component.」警告が発生する時の対処法でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG