React 이벤트 리스너가 기능 구성 요소 내에서 예기치 않은 상태 변경을 표시합니까?

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

이 문의에서는 React Hooks로 작업하는 동안 문제가 발생했습니다. 이벤트 리스너를 활용하여 버튼 클릭을 처리할 때 콘솔 로그에 잘못된 상태가 표시됩니다.

문제 설명

제공된 CodeSandbox에서 다음 단계를 따르세요. :

1. "카드 추가" 버튼을 두 번 클릭하면 두 개의 카드가 생성됩니다.
2. 첫 번째 카드의 경우 "Button1"을 클릭하고 콘솔에서 해당 카드의 존재가 올바르게 기록되는지 확인합니다. 두 장의 카드.
3. 첫 번째 카드의 경우 이벤트 리스너에 의해 제어되는 "Button2"를 클릭합니다. 이제 콘솔에 카드가 하나만 표시되는 것을 확인하세요.

첫 번째 카드의 "Button2"도 두 개의 카드가 표시되어야 하므로 이 동작은 예상치 못한 것입니다.

이 문제는 CardsProvider 및 Card 구성 요소에서 처리하는 이벤트 핸들러가 다르기 때문에 발생합니다.

• CardsProvider: 이벤트 핸들러는 구성 요소가 렌더링될 때마다 다시 생성되며 정의 시 오래된 상태를 참조합니다.
• 카드: 이벤트 핸들러는 구성 요소 마운트 시 등록되고 props로 전달되면 새로운 상태를 받습니다. 그러나 하나의 이벤트 핸들러(handleCardClick)는 한 번만 등록되며 오래된 상태를 계속 참조합니다.

솔루션 접근 방식

이 문제를 해결하려면 다음 사항을 신중하게 고려해야 합니다. useState 후크를 사용하는 기능 구성 요소의 이벤트 처리 접근 방식입니다. 다음은 몇 가지 옵션입니다.

1. 변경 가능한 상태:

useState 대신 useRef를 사용하여 현재 상태를 유지하는 변경 가능한 객체를 도입하세요. 이 접근 방식은 직접적인 상태 변경을 허용하지만 React 개발에 권장되는 방식에 어긋납니다.

2. 상태 업데이트 함수:

이벤트 리스너가 등록될 때마다 바깥쪽 범위에서 오래된 상태 대신 새로운 상태를 수신하는 상태 업데이트 함수를 전달하세요. 이렇게 하면 이벤트 리스너가 항상 최신 상태에 액세스할 수 있습니다.

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

상태가 변경될 때마다 이벤트 리스너를 다시 등록합니다. 이렇게 하면 콜백이 항상 최신 상태 정보를 받을 수 있습니다.

4. 내장 이벤트 처리:

구성 요소 범위 내의 이벤트 리스너의 경우 JSX 내에서 이벤트 리스너를 직접 정의하여 React의 내장 이벤트 처리를 활용하세요. 이렇게 하면 useEffect가 필요하지 않으며 이벤트 리스너가 항상 현재 상태를 수신하도록 보장합니다.

위 내용은 React 이벤트 리스너가 기능 구성 요소 내에서 예기치 않은 상태 변경을 표시합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!