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