はしばみあきら blog

プログラミングアウトプットするブログ。202010スタート

【React】Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

reactで開発中以下のエラーが。

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

最近はとりあえず翻訳してみてます。

f:id:hashibamiakira:20201215192939p:plain

なるほど、でもどこがレンダリングがループし続けているかがわからない...

エラー文で調べたら記事がありました。本当に助かりました。

【意外とハマる??】Reactで、無限ループに気をつけましょう

今回の自分のコードはここが問題だった

      <IconButton
        size="small"
        onClick={
          dispatch({type: 'decrement'}),
          setPreviousMonth
        }
      >
        <ArrowBackIos />
      </IconButton>
      <IconButton
        size="small"
        onClick={
          dispatch({type: 'increment'}),
          setPreviousMonth
        }
      >

onClickでdispatchを送りstateを変更するように記述。

しかしこの記述だとまず画面が読み込まれた瞬間(レンダリングされた瞬間)にdispatchが動いてしまうみたいです。

なのでstateが変更

stateが変更されればレンダリングするというルールなのでまた読み込み

そしてdispatchが送られる...という無限ループが発生していたようです。

そしてこれはアロー関数で防げるみたい。

      <IconButton
        size="small"
        onClick={
          () => dispatch({type: 'decrement'}),
          setPreviousMonth
        }
      >
        <ArrowBackIos />
      </IconButton>
      <IconButton
        size="small"
        onClick={
          () => dispatch({type: 'increment'}),
          setPreviousMonth
        }
      >

エラーは消えた!絶対これからも出てくるエラーだから覚えておかねば。

...と思ったらonClickが動きません。onClickの書き方がまずそうだ。

とりあえずエラーは解決。またボチボチ更新していきます。