＃＃＃質問＃＃＃

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

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

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

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

フックを使用して、

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

値は、現在の

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

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

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