React 구성 요소가 마우스 오른쪽 버튼 클릭의 변수를 기록하도록 활성화하는 방법(두 번 클릭해야 달성 가능)

Question

<p>내 프로젝트의 React 구성 요소에서 오른쪽 클릭에 대한 변수를 올바르게 기록하기 위해 탐색 중에 두 번 클릭해야 하는 문제가 발생했습니다. 문제의 세부정보와 내 코드는 다음과 같습니다. </p> <p>강좌 탐색 시스템을 나타내는 React 구성요소가 있습니다. 탐색 메뉴에서 강좌를 클릭하면 클릭한 강좌의 색인이 기록되고 일부 작업이 시작됩니다. 그러나 색인을 올바르게 기록하려면 두 번 클릭해야 한다는 것을 알았습니다. </p> <p>구성 요소 내부에는 비디오 재생 시작 및 비디오 액세스 OTP 설정 로직을 처리하는 handlerOtp라는 함수가 있습니다. 문제는 이 기능에서 발생한 것 같습니다. </p> <p>다음은 handlerOtp 함수의 간략한 개요입니다. </p> <pre class="lang-js Prettyprint-override"><code>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); } }; <p>제가 관찰한 바에 따르면 첫 번째 클릭이 handlerOtp 함수를 실행했지만 클릭 인덱스가 잘못되어 예상치 못한 동작이 발생했습니다. 두 번째 클릭에서는 올바른 클릭 지수가 기록되어 예상대로 작동했습니다. </p> <p>문제를 일으킬 수 있는 비동기 상태 업데이트가 없는지 확인했습니다. 이 동작을 일으키는 타이밍 또는 상태 관리 문제가 있을 수 있다고 생각하지만 정확한 원인을 파악하는 데 어려움을 겪고 있습니다. </p> <p>이러한 더블 클릭 동작이 발생하는 이유와 첫 번째 클릭 시 올바른 클릭 지수가 기록되도록 하는 방법을 알고 싶습니다. 어떤 통찰력이나 제안이라도 대단히 감사하겠습니다.谢谢!</p> <p>나의 React组件：</p> <pre class="brush:php;toolbar:false;"><StudentRoute> <div className="row mt-2"> <div className="수업-메뉴"> <메뉴 defaultSelectedKeys={[클릭됨]} inlineCollapsed={축소됨} 스타일={{ 높이: "100%" }} > {course.lessons.map((수업, 색인) => ( <아이템 onClick={비동기() => { setClicked(index); setIsLoading(true); setSpin(true); setCheckoutVisibility("없음"); checkTransactionStatus(index); setPaymentMethod("kiosk"); setKioskPhoneNumber(""); 핸들Otp(); }} 키={색인} icon={<아바타>{색인 + 1}} ></pre> <p>尝试使사용console.log记录clicked 조회수：</p>

Answer 1

이것은 setState是异步执行的。你在OnClick事件中设置了clicked，然后调用了handleOtp기능 때문입니다. 이 경우 상태가 아직 업데이트되지 않았으므로 첫 번째 클릭에서 잘못된 색인을 얻습니다.

단지 index作为参数传递给handleOtp。不再需要setClicked만 하면 됩니다.

으아악