【ReactNative開発】Functionを跨いでStateを更新しようとすると”Warning: Cannot update a component while rendering a different component “エラーが出る

こんばんは。今夜もReact Nativeと戦っております。

前置きも省略し、早速本題に参りたいと思います。

前提

以下の構成ですが、今回のエラーは単純にReact Nativeのエラーのようです。

  • React Native
  • Expo
  • TypeScript

問題

以下のような構成のFunction達の間で、Functionを跨いでStateを更新しようとすると、エラーが発生しました。

<アプリケーションコードの構成>

こんな感じで、FuncAの中でstateを定義しているのですが、これをFuncAの中のFuncBから更新しようとしたら怒られました。


export const FuncA = () => {

 const [value, setValue] = useState(0);

#################
 const FuncB = () => {
   setValue(1)
      ・・・
   return (
      ・・・
   )
}
#################

  return (
    ・・・
  );
};

<エラーの内容>

Warning: Cannot update a component from inside the function body of a different component.
at [native code]:null in dispatchAction
at app/app.navigator.tsx:407:21 in MainFlow
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in dispatchAction
at app/app.navigator.tsx:93:37 in profileGetApi.then$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

原因と解決方法

こちらのQiitaの記事が分かりやすくまとめられていて、大変参考になりました。

https://qiita.com/FumioNonaka/items/3fe39911e3f2479128e8

Reactの公式Docにも記載があるのですが、あるコンポーネントのレンダリング中に他のコンポーネントへHooksをトリガーしてはいけないとのこと。

https://ja.reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render

私のケースでは、FuncBでのレンダリング中にFuncAのステートをHooksで更新しようとしたために発生していたエラーのようですね。

解決法についても記載があって、以下の通りFuncB中でのHooksのトリガーを、FuncBのレンダリングが終わってから実行すればOKです。具体的にどうやったらこれが実現できるかというと、ここでuseEffectの出番ですね・・!

この警告は、意図しない状態変更によって引き起こされるアプリケーションのバグを見つけるのに役立ちます。レンダーの結果として他のコンポーネントの状態を意図的に変更したいという稀なケースでは、setState 呼び出しを useEffect にラップすることができます。

最終的に以下のようにコードを修正して、エラーが解消されました!


export const FuncA = () => {

 const [value, setValue] = useState(0);

#################
 const FuncB = () => {
  useEffect(()=>{
   setValue(1)
    })
   return (
      ・・・
   )
}
#################

  return (
    ・・・
  );
};

なるほど、こんな制約もあるんですねぇ・・・勉強になりました。

それでは今回はこの辺りで。

最後までご覧いただきありがとうございました!

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい!という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・!

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。