React Hooks에서 이벤트 리스너를 사용하여 이벤트를 처리할 때 상태가 올바르지 않은 이유는 무엇입니까?

이벤트 리스너의 잘못된 React Hooks 동작

문제: React Hooks를 사용하고 이벤트 리스너로 이벤트를 처리할 때 콘솔에 상태가 표시됩니다. 정확하지 않습니다. 구체적으로 카드 내부의 버튼을 클릭하면 업데이트된 상태(카드 수)가 표시되어야 하는데 원래 상태가 잘못 표시됩니다.

코드 설명:

문제 useState 후크를 사용하여 기능 구성 요소에 이벤트 리스너를 등록하는 방식으로 인해 발생합니다. 제공된 예제에서 handlerCardClick 함수는 CardsProvider 기능 구성 요소 내에 정의되어 있으며 호출 시 항상 초기 상태를 참조합니다.

반면, handlerButtonClick은 Card 기능 구성 요소에 정의되어 다음과 같이 전달됩니다. 소품. 각 렌더링마다 다시 등록되므로 새로운 상태를 참조합니다. 따라서 handlerCardClick은 잘못된 상태를 표시하는 반면, handlerButtonClick은 올바른 상태를 표시합니다.

해결책:

1. 변경 가능한 상태:

useState 대신 useRef를 사용하여 변경 가능한 상태를 저장하세요. 그러나 이 접근 방식은 클래스 구성 요소와 함수 구성 요소 모두에서 안티 패턴이므로 상태 업데이트에는 권장되지 않습니다.

2. 상태 업데이트 기능:

오래된 상태 대신 새로운 상태를 수신하는 이벤트 리스너 내부의 상태 업데이트 기능을 사용하세요.

3. 수동 이벤트 리스너 재등록:

매번 이벤트 리스너를 다시 등록하여 최신 상태에 액세스할 수 있는지 확인하세요.

4. 내장 이벤트 처리:

이벤트 리스너를 onClick={eventListener}와 같은 DOM 이벤트 핸들러에 직접 전달하여 React의 내장 이벤트 처리를 사용합니다.

참고: React 16.8 최종 버전에서 useState는 불변 상태만 지원합니다. 따라서 원래 답변에 설명된 변경 가능한 상태 솔루션은 더 이상 적용할 수 없습니다.

위 내용은 React Hooks에서 이벤트 리스너를 사용하여 이벤트를 처리할 때 상태가 올바르지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!