「再レンダリングが多すぎます。無限ループを防ぐために、React はレンダリングの数を制限しています。」を回避する方法。

Question

私は React TypeScript、Redux ツールキット、およびマテリアル UI を使用しています。 API を呼び出すときに次のエラーが発生します:

エラー: 再レンダリングが多すぎます。 React は無限ループを防ぐためにレンダリングの数を制限します。 renderWithHooks 内 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=8a99eba5:12178:23) mountInminatedComponent (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=8a99eba5:14921:21) beginWork (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=8a99eba5:15902:22)....

以下にコードを示します:

EditMenuPermission.tsx

リーリー

RoleMenuTrees.tsx

リーリー

useEffectの依存関係を削除してみました。しかし、エラーはまだ存在します。

Answer 1

＃＃＃質問＃＃＃

ここでの問題は、React コンポーネントのライフサイクル

external に React 状態の更新をキューに入れると、意図しない副作用が生じることです。このコードは、EditMenuPermission コンポーネントがレンダリングされるたびに呼び出され、role.menus が true の場合、ステータス更新をキューに入れ、コンポーネントの再レンダリングをトリガーします。これが表示されるレンダリング ループです。 リーリー ＃＃＃解決＃＃＃

roleMenus

ステータス更新をコンポーネントのライフサイクルに移動します。

簡単な解決策 簡単な方法は、

useEffect

フックを使用して、

roleMenus

状態を現在の role.menus 値に同期することです。 リーリー 改善されたソリューション 1 これは機能しますが、派生した「状態」を React 状態に保存する React のアンチパターンであると考えられます。現在の

roleMenus

値は、現在の

role.menus

値から簡単に計算できます。 useState/useEffect カップリングを作成している場合は、ほぼ 100% の場合、代わりに useMemo フックを使用する必要があることに留意してください。 リーリー 改善された解決策 2 これが Redux から頻繁に選択して計算するものである場合は、ロジックをセレクター関数に移動することを検討することをお勧めします。

＃＃＃例：＃＃＃ リーリー リーリー

さらなる改善のための提案

さらに良いことに、Redux の状態を更新するときに、スライス リデューサー関数でロール データを JSON.parse するだけで、状態が読み取られるたびではなく、状態が更新されるたびに 1 つの計算だけが実行されます。