亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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