React コンポーネントが右クリックの変数を記録できるようにする方法 (これを達成するにはダブルクリックが必要です)

Question

プロジェクトの React コンポーネントで問題が発生しました。右クリックの変数を適切に記録するには、ナビゲーション中に 2 回クリックする必要がありました。問題の詳細とコードは次のとおりです。

コース ナビゲーション システムを表す React コンポーネントがあります。ナビゲーション メニューでコースをクリックすると、クリックしたコースのインデックスが記録され、何らかのアクションが開始されます。ただし、インデックスを正しく記録するには 2 回クリックする必要があることに気付きました。

コンポーネント内には、handleOtp と呼ばれる関数があり、ビデオ再生の開始とビデオ アクセス OTP の設定のロジックを処理します。問題はこの機能に起因しているようです。

以下は、handleOtp 関数の簡略化した概要です。

<code>const handleOtp = async () => {
  試す {
    constlessonId = course.lessons[クリック]?.video?.id;

    // ここが問題の領域です
    const { data } = await axios.post("/api/videoOtp", {
      ビデオ ID: レッスン ID、
      ユーザー名: ユーザー.ユーザー名、
      イプ、
    });

    if (!data.otp && !data.playbackInfo) {
      return toast.error("ビデオ OTP に失敗しました! ページを再読み込みしてください");
    }

    loadVideo({
      otp: data.otp、
      再生情報: data.playbackInfo,
      構成： {
        自動再生: true、
      }、
      コンテナ:container.current、
    });
  } キャッチ (エラー) {
    コンソール.エラー(エラー);
  }
};

</code>

私の観察によると、最初のクリックで handleOtp 関数がトリガーされましたが、クリックのインデックスが間違っていたため、予期しない動作が発生しました。 2 回目のクリックでは、最終的に正しいクリック インデックスが記録され、期待どおりに機能しました。

問題を引き起こす可能性のある非同期のステータス更新がないことを確認しました。この動作の原因はタイミングまたは状態管理の問題である可能性があると考えられますが、正確な原因を特定するのは困難です。

このダブルクリック動作が発生する理由と、最初のクリックで正しいクリック インデックスが確実に記録されるようにする方法を理解したいと考えています。洞察や提案をいただければ幸いです。

私たちの React 構成要素：

<StudentRoute>
        <div className="行 mt-2">
          <div className="レッスンメニュー">
            <メニュー
              defaultSelectedKeys={[クリック]}
              inlineCollapsed={折りたたまれた}
              スタイル={{ 高さ: "100%" }}
            >
              {course.lessons.map((レッスン, インデックス) => (
                <アイテム
                  onClick={async () => {
                    setClicked(インデックス);
                    setIsLoading(true);
                    setSpin(true);
                    setCheckoutVisibility("none");
                    checkTransactionStatus(インデックス);
                    setPaymentMethod("キオスク");
                    setKioskPhoneNumber("");
                    ハンドルOtp();
                  }}
                  
                  キー={インデックス}
                  icon={<アバター>{インデックス 1}</アバター>}
                >

尝试使用console.log记录クリック数：

Answer 1

これは、setState が非同期で実行されるためです。 OnClick イベントに clicked を設定し、handleOtp 関数を呼び出しました。この場合、状態はまだ更新されていないため、最初のクリックで間違ったインデックスが取得されます。

index をパラメータとして handleOtp に渡すだけです。 setClicked は必要なくなりました。

リーリー