How to enable React components to record the variables of right-click, which requires double-clicking to achieve

Question

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:

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.

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.

The following is a simplified overview of the handleOtp function:

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

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.

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.

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.谢谢！

我的React组件：

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

尝试使用console.log记录clicked变量：

Answer 1

This is because setState is executed asynchronously. You set clicked in the OnClick event, and then called the handleOtp function. In this case, the state hasn't been updated yet, so you get the wrong index on the first click.

You just need to pass index as a parameter to handleOtp. setClicked is no longer needed.

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