【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.
最近はとりあえず翻訳してみてます。
なるほど、でもどこがレンダリングがループし続けているかがわからない...
エラー文で調べたら記事がありました。本当に助かりました。
【意外とハマる??】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の書き方がまずそうだ。
とりあえずエラーは解決。またボチボチ更新していきます。