Bagaimana untuk membolehkan komponen React merekodkan pembolehubah klik kanan, yang memerlukan klik dua kali untuk mencapainya

Question

Saya menghadapi masalah dengan komponen React dalam projek saya di mana saya perlu mengklik dua kali semasa navigasi untuk merekodkan pembolehubah dengan betul untuk klik kanan. Berikut ialah butiran masalah dan kod saya:

Saya mempunyai komponen React yang mewakili sistem navigasi kursus. Apabila saya mengklik pada kursus dalam menu navigasi, ia harus merekodkan indeks kursus yang diklik dan memulakan beberapa tindakan. Walau bagaimanapun, saya perasan bahawa saya perlu mengklik dua kali untuk mendapatkan indeks untuk direkod dengan betul.

Di dalam komponen, terdapat fungsi yang dipanggil handleOtp, yang mengendalikan logik untuk memulakan main balik video dan menetapkan OTP akses video. Masalahnya nampaknya berpunca daripada fungsi ini.

Berikut ialah gambaran keseluruhan ringkas fungsi handleOtp:

<code>const handleOtp = async () =>
  cuba {
    const lessonId = kursus.pelajaran[diklik]?.video?.id;

    // Ini adalah kawasan masalah
    const { data } = tunggu axios.post("/api/videoOtp", {
      videoId: lessonId,
      nama pengguna: pengguna.nama pengguna,
      ip,
    });

    jika (!data.otp && !data.playbackInfo) {
      return toast.error("OTP Video gagal! Muat semula halaman");
    }

    muatVideo({
      otp: data.otp,
      playbackInfo: data.playbackInfo,
      konfigurasi: {
        automain: benar,
      },
      bekas: container.current,
    });
  } tangkap (err) {
    console.error(err);
  }
};

</code>

Menurut pemerhatian saya, klik pertama mencetuskan fungsi handleOtp, tetapi indeks klik itu salah, mengakibatkan tingkah laku yang tidak dijangka. Klik kedua akhirnya merekodkan indeks klik yang betul dan berfungsi seperti yang diharapkan.

Saya telah memastikan tiada kemas kini status tak segerak yang boleh menyebabkan masalah. Saya mengesyaki mungkin terdapat masalah masa atau pengurusan keadaan yang menyebabkan tingkah laku ini, tetapi saya menghadapi kesukaran untuk menentukan punca sebenar.

Saya ingin dapat memahami sebab tingkah laku klik dua kali ini berlaku dan cara memastikan indeks klik yang betul direkodkan pada klik pertama. Sebarang pandangan atau cadangan akan sangat dihargai.谢谢！

我的React组件：

        

          

            
              {course.lessons.map((pelajaran, indeks) => (
                 {
                    setClicked(indeks);
                    setIsLoading(true);
                    setSpin(benar);
                    setCheckoutVisibility("tiada");
                    checkTransactionStatus(index);
                    setPaymentMethod("kiosk");
                    setKioskPhoneNumber("");
                    handleOtp();
                  }}
                  
                  kunci={indeks}
                  icon={{index + 1}}
                >
尝试使用console.log记录diklik变量：

Answer 1

Ini kerana fungsi setState是异步执行的。你在OnClick事件中设置了clicked，然后调用了handleOtp. Dalam kes ini, keadaan belum dikemas kini lagi, jadi anda mendapat indeks yang salah pada klik pertama.

Anda hanya perlu 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/>