So aktivieren Sie React-Komponenten, um die Variablen eines Rechtsklicks aufzuzeichnen, wofür ein Doppelklick erforderlich ist

Question

Ich hatte ein Problem mit einer React-Komponente in meinem Projekt, bei dem ich während der Navigation zweimal klicken musste, um die Variable für den Rechtsklick richtig aufzuzeichnen. Hier sind die Details des Problems und mein Code:

Ich habe eine React-Komponente, die ein Kursnavigationssystem darstellt. Wenn ich im Navigationsmenü auf einen Kurs klicke, sollte der Index des angeklickten Kurses aufgezeichnet und eine Aktion eingeleitet werden. Allerdings ist mir aufgefallen, dass ich zweimal klicken musste, damit der Index korrekt aufzeichnete.

Innerhalb der Komponente gibt es eine Funktion namens handleOtp, die die Logik zum Starten der Videowiedergabe und zum Festlegen des Videozugriffs-OTP verwaltet. Das Problem scheint von dieser Funktion herzurühren.

Das Folgende ist eine vereinfachte Übersicht über die handleOtp-Funktion:

<code>const handleOtp = async () =>
  versuchen {
    const teachingId = course.lessons[clicked]?.video?.id;

    // Das ist der Problembereich
    const { data } = waiting axios.post("/api/videoOtp", {
      Video-ID: Lektions-ID,
      Benutzername: user.username,
      IP,
    });

    if (!data.otp && !data.playbackInfo) {
      return toast.error("Video OTP fehlgeschlagen! Seite neu laden");
    }

    LoadVideo({
      otp: data.otp,
      WiedergabeInfo: data.playbackInfo,
      Aufbau: {
        Autoplay: wahr,
      },
      Container: container.current,
    });
  } Catch (Err) {
    console.error(err);
  }
};

</code>

Meiner Beobachtung nach löste der erste Klick die handleOtp-Funktion aus, aber der Index des Klicks war falsch, was zu unerwartetem Verhalten führte. Beim zweiten Klick wurde schließlich der richtige Klickindex aufgezeichnet und funktionierte wie erwartet.

Ich habe sichergestellt, dass es keine asynchronen Statusaktualisierungen gibt, die Probleme verursachen könnten. Ich vermute, dass dieses Verhalten durch ein Zeit- oder Zustandsverwaltungsproblem verursacht wird, aber es fällt mir schwer, die genaue Ursache zu ermitteln.

Ich würde gerne verstehen, warum dieses Doppelklickverhalten auftritt und wie ich sicherstellen kann, dass beim ersten Klick der richtige Klickindex aufgezeichnet wird. Für alle Erkenntnisse oder Vorschläge wären wir sehr dankbar.谢谢！

我的React组件:

<StudentRoute>
        <div className="row mt-2">
          <div className="lessons-menu">
            <Menü
              defaultSelectedKeys={[angeklickt]}
              inlineCollapsed={collapsed}
              style={{ height: "100%" }}
            >
              {course.lessons.map((lesson, index) => (
                <Artikel
                  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

这是因为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/>