React Hooks가 이벤트 리스너와 일관되지 않은 상태 동작을 나타내는 이유는 무엇입니까?

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

개요

이 문서에서는 React Hooks를 사용할 때 발생하는 문제, 특히 사용자 정의 구성 요소 내의 이벤트 리스너에 의해 트리거될 때 상태 콘솔 로깅.

문제 설명

주어진 CodeSandbox(https://codesandbox.io/s/lrxw1wr97m)를 고려하십시오. 다음 단계를 따르세요.

1. "카드 추가" 버튼을 두 번 클릭하여 두 개의 카드를 만듭니다.
2. 첫 번째 카드에서 "버튼 1"을 클릭하면 올바른 카드 수(2개)가 표시됩니다. )를 콘솔에 표시합니다.
3. 첫 번째 카드에서 "Button2"(이벤트 리스너가 처리하는)를 클릭하면 콘솔에 카드 하나만 잘못 표시되는 것을 관찰할 수 있습니다.

"Button2"에 연결된 이벤트 리스너 내에서 업데이트된 상태를 표시하려고 할 때 문제가 발생합니다.

근본 원인

상태 표시의 불일치는 이벤트 핸들러가 구현되는 다양한 방식에서 비롯됩니다. CardsProvider 및 Card 구성 요소에 있습니다.

• CardsProvider: 이벤트 핸들러는 기능 구성 요소의 범위 내에서 정의되어 정의 시 현재 상태를 참조하여 새 함수를 생성합니다.
• 카드: 이벤트 핸들러는 props로 수신되고 컴포넌트 마운트에 한 번 등록됩니다. 그러나 이러한 핸들러는 현재 상태를 나타내지 않을 수 있는 오래된 상태를 참조합니다.

솔루션

다음과 같은 여러 접근 방식으로 이 문제를 해결할 수 있습니다.

변경 가능한 상태 :

useRef에서 제공하는 것과 같은 변경 가능한 상태 값을 사용하여 최신 상태 변경 사항을 유지할 수 있습니다. 그러나 useState는 불변 상태를 관리하기 위한 것이므로 이 방법은 권장되지 않습니다.

상태 업데이트 기능:

상태 업데이트 기능을 사용하면 최신 상태를 콜백을 수행하여 표시된 상태가 항상 최신인지 확인합니다.

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

또는 각 상태 업데이트에 이벤트 리스너를 다시 등록할 수 있습니다. 현재 상태에 대한 액세스를 보장합니다.

내장 이벤트 처리:

가능한 경우 React의 기본 DOM 이벤트 처리 메커니즘을 활용하면 수동 이벤트 리스너 관리가 필요하지 않습니다.

요약

이벤트 리스너 처리와 상태 표시의 불일치는 영향을 받는 구성 요소 내에서 이벤트 핸들러를 다르게 처리하기 때문에 발생할 수 있습니다. 적절한 솔루션을 채택함으로써 개발자는 이 문제를 완화하고 올바른 상태 동작을 유지할 수 있습니다.

위 내용은 React Hooks가 이벤트 리스너와 일관되지 않은 상태 동작을 나타내는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!