如何使React组件能够记录右键点击的变量，需要双击才能实现
<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>
全部回复(1)我来回复
P粉8212313192023-08-16 16:58:48
这是因为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/>回复
0
