"재렌더링이 너무 많습니다. React는 무한 루프를 방지하기 위해 렌더링 수를 제한합니다."

Question

저는 React TypeScript, Redux 툴킷, Material UI를 사용하고 있습니다. API를 호출할 때 다음 오류가 발생합니다:

오류: 재렌더링이 너무 많습니다. React는 무한 루프를 방지하기 위해 렌더링 수를 제한합니다. renderWithHooks에서 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=8a99eba5:12178:23) mountInminatingComponent(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 상태 업데이트를 React 구성 요소 수명 주기 외부에서 대기시키는 것이 의도하지 않은 부작용이라는 것입니다. EditMenuPermission 组件呈现时都会调用此代码，如果 role.menus가 true일 때마다 상태 업데이트가 대기열에 추가되고 구성 요소가 다시 렌더링되도록 트리거됩니다. 이것이 여러분이 보고 있는 렌더링 루프입니다.

으아아아

솔루션

상태 업데이트를 구성 요소 수명 주기로 이동 roleMenus.

쉬운 솔루션

간단한 방법은 useEffect 후크를 사용하여 useEffect 挂钩将 roleMenus 状态同步到当前 role.menus 상태를 현재 role.menus 값과 동기화하는 것입니다.

으아아아

개선된 솔루션 1

이 방법은 작동하지만 일반적으로 파생된 "상태"를 React 상태에 저장하는 React 안티 패턴으로 간주됩니다. 현재 roleMenus值可以很容易地从当前的role.menus值计算出来。您应该记住，如果您发现自己编写了 useState/useEffect 耦合，那么大约 100% 的情况下，您应该使用 useMemo 값은 현재 role.menus 값에서 쉽게 계산할 수 있습니다. useState/useEffect 커플링을 작성하는 경우에는 거의 100% useMemo를 사용해야 한다는 점을 명심해야 합니다. 후크 교체.

으아아아

향상된 솔루션 2

Redux에서 자주 선택하고 계산하는 항목이라면 로직을 선택기 기능으로 옮기는 것을 고려해 보는 것이 좋습니다.

예:

으아아아 으아아아

추가 개선을 위한 제안

더 좋은 점은 Redux 상태를 업데이트할 때 슬라이스 감속기 함수에서 역할 데이터를 JSON.parse하면 상태를 읽을 때마다가 아니라 상태가 업데이트될 때마다 한 번의 계산만 수행하면 된다는 것입니다.