浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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.」警告が発生する時の対処法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)