<p>I ran into a problem with a React component in my project where I needed to click twice during navigation to properly record the variable for the right click. Here are the details of the problem and my code: </p> <p>I have a React component that represents a course navigation system. When I click on a course in the navigation menu, it should record the index of the clicked course and initiate some action. However, I noticed that I needed to click twice to get the index to record correctly. </p> <p>Inside the component, there is a function called handleOtp, which handles the logic of starting video playback and setting the video access OTP. The problem seems to originate from this function. </p> <p>The following is a simplified overview of the handleOtp function:</p> <pre class="lang-js prettyprint-override"><code>const handleOtp = async () => { try { const lessonId = course.lessons[clicked]?.video?.id; // This is the problem area const { data } = await axios.post("/api/videoOtp", { videoId: lessonId, username: user.username, ip, }); if (!data.otp && !data.playbackInfo) { return toast.error("Video OTP failed! Reload the page"); } loadVideo({ otp: data.otp, playbackInfo: data.playbackInfo, configuration: { autoplay: true, }, container: container.current, }); } catch (err) { console.error(err); } }; </code></pre> <p>According to my observation, the first click triggered the handleOtp function, but the index of the click was wrong, resulting in unexpected behavior. The second click ended up recording the correct click index and worked as expected. </p> <p>I've made sure there are no asynchronous status updates that could cause problems. I suspect there may be a timing or state management issue causing this behavior, but I'm having a hard time determining the exact cause. </p> <p>I would like to be able to understand why this double click behavior occurs and how to ensure that the correct click index is recorded on the first click. Any insights or suggestions would be greatly appreciated.谢谢！</p> <p>我的React组件：</p> <pre class="brush:php;toolbar:false;"><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 () => { setClicked(index); setIsLoading(true); setSpin(true); setCheckoutVisibility("none"); checkTransactionStatus(index); setPaymentMethod("kiosk"); setKioskPhoneNumber(""); handleOtp(); }} key={index} icon={<Avatar>{index 1}</Avatar>} ></pre> <p>尝试使用console.log记录clicked变量：</p>

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/>