내 프로젝트의 React 구성 요소에서 오른쪽 클릭에 대한 변수를 올바르게 기록하기 위해 탐색 중에 두 번 클릭해야 하는 문제가 발생했습니다. 문제의 세부정보와 내 코드는 다음과 같습니다.

강좌 탐색 시스템을 나타내는 React 구성요소가 있습니다. 탐색 메뉴에서 강좌를 클릭하면 클릭한 강좌의 색인이 기록되고 일부 작업이 시작됩니다. 그러나 색인을 올바르게 기록하려면 두 번 클릭해야 한다는 것을 알았습니다.

구성 요소 내부에는 비디오 재생 시작 및 비디오 액세스 OTP 설정 로직을 처리하는 handlerOtp라는 함수가 있습니다. 문제는 이 기능에서 발생한 것 같습니다.

다음은 handlerOtp 함수의 간략한 개요입니다.

const handlerOtp = async () => 노력하다 { const LessonId = Course.lessons[클릭]?.video?.id; // 이것이 문제의 영역이다 const { data } = axios.post("/api/videoOtp", { 기다리고 있습니다. videoId: 강의 ID, 사용자 이름: 사용자.사용자 이름, IP, }); if (!data.otp && !data.playbackInfo) { return toast.error("동영상 OTP 실패! 페이지를 새로고침하세요."); } 로드비디오({ otp: data.otp, 재생정보: data.playbackInfo, 구성: { 자동재생: 사실, }, 컨테이너: 컨테이너.현재, }); } 잡기 (오류) { console.error(err); } };
제가 관찰한 바에 따르면 첫 번째 클릭이 handlerOtp 함수를 실행했지만 클릭 인덱스가 잘못되어 예상치 못한 동작이 발생했습니다. 두 번째 클릭에서는 올바른 클릭 지수가 기록되어 예상대로 작동했습니다. 
 
문제를 일으킬 수 있는 비동기 상태 업데이트가 없는지 확인했습니다. 이 동작을 일으키는 타이밍 또는 상태 관리 문제가 있을 수 있다고 생각하지만 정확한 원인을 파악하는 데 어려움을 겪고 있습니다. 
 
이러한 더블 클릭 동작이 발생하는 이유와 첫 번째 클릭 시 올바른 클릭 지수가 기록되도록 하는 방법을 알고 싶습니다. 어떤 통찰력이나 제안이라도 대단히 감사하겠습니다.谢谢!
 
나의 React组件：
 
 
 
 <메뉴 defaultSelectedKeys={[클릭됨]} inlineCollapsed={축소됨} 스타일={{ 높이: "100%" }} > {course.lessons.map((수업, 색인) => ( <아이템 onClick={비동기() => { setClicked(index); setIsLoading(true); setSpin(true); setCheckoutVisibility("없음"); checkTransactionStatus(index); setPaymentMethod("kiosk"); setKioskPhoneNumber(""); 핸들Otp(); }} 키={색인} icon={
      <아바타>
       {색인 + 1}
      } >
 
尝试使사용console.log记录clicked 조회수：