ReactNative+redux-formで「Cannot update a component from inside the function body of a different component」のエラーが出た時の対処法

先日、ReactNativeとredux-formを使ったアプリでWarningが出ました。 ちょっと難解な内容だったので対処法をメモとして残します。

前提条件

  • react-nativeを使用
  • redux-formを使用

発生環境

  • react : 16.13.0
  • react-native : 0.63.1
  • redux-form : 8.3.5

Warning内容

Warning: Cannot update a component from inside the function body of a different component.

調査

調べたところ、同様のWarningが発生している例をいくつか見かけました。

原因はメッセージにある通りで、対象のコンポーネントを描画中に他コンポーネントのsetStateを呼んでいることが原因のようです。

しかし、どうも発生箇所はredux-form中の様子。 ※正確には、redux-formのvalidateで各Fieldに対してerrorを発生させた場合に起きている。

redux-formのIssueを見ると、reactのバージョンを16.13.1に上げればいいようなので上げてみることに。

yarn upgrade react --latest

しかしこれでも発生する。 ダメ元でredux-formのバージョンも最新にしてみる。

yarn upgrade redux-form --latest

これで直った。

まとめ

今回はWarning: Cannot update a component from inside the function body of a different component.の対処方法を記載しました。 ライブラリ依存のWarningやErrorはちょくちょく見かけるので、初歩ではありますが何かあったらIssueをチェックするといいかと思います。

SNSでシェアする