ReactJS - 사용자 정의 후크 반환 함수는 내부 상태의 실제 데이터를 저장하지 않습니다.

Question

알림 위젯에 대한 사용자 정의 후크useNotifications가 있습니다. 이 후크는 다음 요소가 포함된 배열을 반환합니다(ant.design 메시징 API와 유사).

• add: 새로운 알림을 추가하는 기능
• remove: 알림 ID를 가져오고 알림을 삭제하는 기능
• contextHandler: JSX가 컴포넌트 렌더링으로 전달

사용자가 전화add를 하면 알림을 삭제할 수 있는 ID를 받게 됩니다

이 질문은 특히 삭제 기능에 관한 것입니다. 새 알림을 추가한 직후 이 함수를 호출하므로 함수는 이전 목록의 복사본을 수신하므로 새 요소가 없으며 오류가 발생합니다. 구성 요소가 동일한 API를 사용하도록 수정하려면 어떻게 해야 합니까?

알림 후크 사용 어떻게 사용하나요

Codesandbox(테스트용으로 setTimeout，它在3秒内调用了remove()): https://codesandbox.io/s/goofy-smoke-5q7dw3?file=/src/App.js:405-440

Answer 1

remove 函数使用 状态更新器功能，可以访问最新的状态值。这允许您在组件在 remove() 中重新渲染之前访问新的 list 상태를 만들 수 있습니다.

참고: 현재 중첩된 개체의 isMounted 属性设置为 false을 변경하여 원래 상태를 변경하고 있습니다. 배열을 복사하더라도 다시 렌더링 문제를 방지하려면 업데이트되는 객체도 복사해야 합니다.

다음은 상태의 최신 값에 액세스하고 상태 돌연변이를 방지하는 방법에 대한 몇 가지 수정 사항입니다.

으아악

아래 예를 참조하세요: