상위 구성요소 배열에 대한 하위 구성요소 업데이트로 인한 무한 재렌더링 방지

Question

학생(자녀) 컴포넌트에서

• 변수 값이 변경되면 useEffect 挂钩将通过 handleStudentsChange(상위 구성 요소에서 제공하는 기능)이 상위 배열을 업데이트합니다.

학생(학부모) 컴포넌트에서

• 학생(아동) 구성품 목록 제시
• 무한 루프를 방지하려면 handleStudentsChange 函数使用 useCallback훅 정의를 수행하세요. 그러나 작동하지 않는 것 같습니다.

질문/질문

• 변경되면 handleStudentsChange무기한 실행됩니다
• 이게 왜요? 어떻게 고치나요?
• 참고: onSubmit 버튼은 필요하지 않습니다

여기에서 코드를 확인하세요: 저는 CodeSandBox입니다 링크

Student.tsx(어린이)

으아아아

Students.tsx(부모)

으아아아

위 코드와 같이 무한 루프를 방지하기 위해 학생(자식) 컴포넌트에서는 React.memo를, React.memo ，并在 handleStudentsChange 上使用 useCallback에서는 useCallback을 사용해 보았습니다. 그러나 무한 루프는 계속됩니다.

Answer 1

질문

handleStudentsChange不仅在发生更改时无限运行一次-它从第一次渲染开始就无限运行。这是因为Student组件具有调用handleStudentsChange的useEffect，它更新了Students组件中的状态，导致Student组件重新渲染，然后再次调用useEffect, 무한 루프.

솔루션

입력을 업데이트한 후에만 handleStudentsChange，而不是在每次渲染后都调用。我在下面的示例中包含了一个示例，它在从输入触发blur事件后更新了Students에서 상태를 호출해야 합니다. 보다 스마트하고 복잡한 접근 방식을 위해 props와 state를 비교하여 업데이트가 필요한지 결정할 수 있지만 이에 대해서는 직접 알아내도록 하겠습니다.

으아아아 으아아아