<p>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: </p> <p>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. </p> <p>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. </p> <p>Das Folgende ist eine vereinfachte Übersicht über die handleOtp-Funktion: </p> <pre class="lang-js Prettyprint-override"><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></pre> <p>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. </p> <p>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. </p> <p>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.谢谢！</p> <p>我的React组件:</p> <pre class="brush:php;toolbar:false;"><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>} ></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/>