如何使React元件能夠記錄右鍵點擊的變量，需要雙擊才能實現

Question

<p>我在我的專案中遇到了一個React元件的問題，當我在導航過程中需要點擊兩次才能正確記錄右鍵點擊的變數。以下是問題的詳細資訊和我的程式碼：</p> <p>我有一個React元件，表示課程課程導航系統。當我在導航選單中點擊一個課程時，它應該記錄所點擊課程的索引並啟動某些操作。然而，我注意到我需要點擊兩次才能正確記錄索引。 </p> <p>在元件內部，有一個名為handleOtp的函數，它處理啟動視訊播放和設定視訊存取OTP的邏輯。問題似乎源自於這個函數。 </p> <p>以下是handleOtp函數的簡化概述：</p> <pre class="lang-js prettyprint-override"><code>const handleOtp = async () => { try { const lessonId = course.lessons[clicked]?.video?.id; // 這是有問題的區域 const { data } = await axios.post("/api/videoOtp", { videoId: lessonId, username: user.username, ip, }); if (!data.otp && !data.playbackInfo) { return toast.error("影片OTP失敗！重新載入頁面"); } loadVideo({ otp: data.otp, playbackInfo: data.playbackInfo, configuration: { autoplay: true, }, container: container.current, }); } catch (err) { console.error(err); } }; </code></pre> <p>根據我的觀察，第一次點擊觸發了handleOtp函數，但點擊的索引錯誤，導致了意外的行為。第二次點擊最終記錄了正確的點擊索引，並按預期工作。 </p> <p>我已確保沒有可能引起問題的非同步狀態更新。我懷疑可能存在一個時間或狀態管理問題導致了這種行為，但我很難確定確切的原因。 </p> <p>我希望能夠理解為什麼會發生這種雙擊行為，以及如何確保在第一次點擊時記錄正確的點擊索引。非常感謝任何見解或建議。謝謝！</p> <p>我的 React 元件：</p> <pre class="brush:php;toolbar:false;"><StudentRoute>

<選單 defaultSelectedKeys={[點選]} inlineCollapsed={折疊} 樣式={{高度:“100%”}} > {course.lessons.map((課程，索引) => ( <項目 onClick={async()==> { setClicked(索引); setIsLoading(true); setSpin(真); setCheckoutVisibility(“無”); 檢查交易狀態（索引）； setPaymentMethod("自助服務終端"); setKioskPhoneNumber(""); 處理Otp（）； }} 鍵={索引} icon={<頭像>{索引1}} ></前> <p>嘗試使用console.log記錄點擊的變數：</p>

1

0

0

P粉083785014

回覆

全部回覆(1)

我來回復 關閉

P粉8212313192023-08-16 16:58:48 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/>

點贊 +0

新增回覆 关闭回复

P粉083785014

回覆

熱門專題

更多>

• CakePHP 教程
• Laravel 教程
• PHP教程
• Java教學

熱門文章

• 下載CoinEx安卓手機版的方法
• 英國提出法案將比特幣和 NFT 等數位資產歸類為個人財產
• 2024 年 9 月的《NBA 2K25》置物櫃代碼
• word文件中有白色底色怎麼去除 Word文件文件底色怎麼取消方法
• win10遠端連線提示NLA怎麼辦 win10遠端連線提示NLA詳解

熱門教學

更多>

相關教學

熱門推薦

最新課程

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1402834
• 
  php入門教程之一週學會PHP

  4230294
• 
  JAVA 初級入門影片教學

  2416933

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1402834
• 
  JAVA 初級入門影片教學

  2416933
• 
  小甲魚零基礎入門學習Python影片教學

  498015
• 
  Web前端開發極速入門

  214150
• 
  零基礎精通 PS 影片教學

  858662

• 
  【web前端】Node.js快速入門

  4647
• 
  國外Web開發全端課程全集

  3605
• 
  Go語言實戰之 GraphQL

  3092
• 
  550W粉絲大佬手把手從零學JavaScript

  557
• 
  python大神Mosh，零基礎小白6小時完全入門

  16015

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

• [表單按鈕] jQuery企業留言表單聯絡程式碼
• [播放器特效] HTML5 MP3音樂盒播放特效
• [選單導航] HTML5酷炫粒子動畫導覽選單特效
• [表單按鈕] jQuery可視化表單拖曳編輯程式碼
• [播放器特效] VUE.JS仿酷狗音樂播放器代碼
• [html5特效] 經典html5推箱子小遊戲
• [圖片特效] jQuery滾動添加或減少圖片特效
• [相簿特效] CSS3個人相簿封面懸停放大特效

• [Bootstrap模板] 有機蔬果供應商網頁範本 Bootstrap5
• [後端模板] Bootstrap3多功能資料資訊後台管理響應式網頁範本-Novus
• [Bootstrap模板] 房產資源服務平台網頁範本 Bootstrap5
• [Bootstrap模板] 簡約履歷資料網頁範本 Bootstrap4
• [Bootstrap模板] bootstrap響應式寬螢幕圖書教育網站範本-DREAMLIFE
• [後端模板] MAC風格響應式藍色企業CMS後台管理系統模版
• [後端模板] 響應式漸層大氣後台管理系統網站模板-usinessbox
• [Bootstrap模板] 響應式蔬果商店網站模板-Organio

• [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
• [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
• [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
• [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
• [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
• [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
• [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
• [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

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