<p>我在我的项目中遇到了一个React组件的问题，当我在导航过程中需要点击两次才能正确记录右键点击的变量。以下是问题的详细信息和我的代码：</p>
<p>我有一个React组件，表示课程课程导航系统。当我在导航菜单中点击一个课程时，它应该记录所点击课程的索引并启动某些操作。然而，我注意到我需要点击两次才能正确记录索引。</p>
<p>在组件内部，有一个名为handleOtp的函数，它处理启动视频播放和设置视频访问OTP的逻辑。问题似乎源自这个函数。</p>
<p>以下是handleOtp函数的简化概述：</p>
<pre class="lang-js prettyprint-override"><code>const handleOtp = async () => {
try {
const lessonId = course.lessons[clicked]?.video?.id;
// 这是有问题的区域
const { data } = await axios.post("/api/videoOtp", {
videoId: lessonId,
username: user.username,
ip,
});
if (!data.otp && !data.playbackInfo) {
return toast.error("视频OTP失败！重新加载页面");
}
loadVideo({
otp: data.otp,
playbackInfo: data.playbackInfo,
configuration: {
autoplay: true,
},
container: container.current,
});
} catch (err) {
console.error(err);
}
};
</code></pre>
<p>根据我的观察，第一次点击触发了handleOtp函数，但是点击的索引错误，导致了意外的行为。第二次点击最终记录了正确的点击索引，并按预期工作。</p>
<p>我已确保没有可能引起问题的异步状态更新。我怀疑可能存在一个时间或状态管理问题导致了这种行为，但我很难确定确切的原因。</p>
<p>我希望能够理解为什么会发生这种双击行为，以及如何确保在第一次点击时记录正确的点击索引。非常感谢任何见解或建议。谢谢！</p>
<p>我的 React 组件：</p>
<pre class="brush:php;toolbar:false;"><StudentRoute>
<菜单
defaultSelectedKeys={[点击]}
inlineCollapsed={折叠}
样式={{高度:“100%”}}
>
{course.lessons.map((课程，索引) => (
<项目
onClick={async()==> {
setClicked(索引);
setIsLoading(true);
setSpin(真);
setCheckoutVisibility(“无”);
检查交易状态（索引）；
setPaymentMethod("自助服务终端");
setKioskPhoneNumber("");
处理Otp（）；
}}
键={索引}
icon={<头像>{索引 + 1}}
></前>
<p>尝试使用console.log记录点击的变量：</p>
这是因为
setState是异步执行的。你在OnClick事件中设置了clicked，然后调用了handleOtp函数。在这种情况下，状态还没有更新，所以第一次点击会得到错误的索引。你只需要将
index作为参数传递给handleOtp。不再需要setClicked。const handleOtp = async (index) => {} <StudentRoute> <div className="row mt-2"> <div className="lessons-menu"> <Menu defaultSelectedKeys={[clicked]} inlineCollapsed={collapsed} style={{ height: "100%" }} > {course.lessons.map((lesson, index) => ( <Item onClick={async () => { setIsLoading(true); setSpin(true); setCheckoutVisibility("none"); checkTransactionStatus(index); setPaymentMethod("kiosk"); setKioskPhoneNumber(""); handleOtp(index); }} key={index} icon={<Avatar>{index + 1}</Avatar>} /> ))} <Menu/> </div> </div> <StudentRoute/>