關於react的Tabs組件中TabPane的bug

来源:https://www.cnblogs.com/maleijiejie/archive/2023/04/13/17316191.html
-Advertisement-
Play Games

今天解決了我自認為一個很不起眼的Bug。 我的Tabs下麵有5個tabPane,並且這幾個tabPane共用了一個search組件,今天遇到了一個bug,就是這幾個組件使用公共查找組件的時候,前一個組件的值會影響下一個組件的值。 找了半天發現,原來我應該在父組件Tabs中定義一個useState的狀 ...


今天解決了我自認為一個很不起眼的Bug。

我的Tabs下麵有5個tabPane,並且這幾個tabPane共用了一個search組件,今天遇到了一個bug,就是這幾個組件使用公共查找組件的時候,前一個組件的值會影響下一個組件的值。

找了半天發現,原來我應該在父組件Tabs中定義一個useState的狀態status,當Tabs執行callback的時候,會有一個key,就把這個key存在status裡面,然後當status等於每個組件對應的key時再載入相對應的組件。

不然TabPane會多載入,這樣數據就亂了。

寫一個代碼片段

<Tabs onTabClick={callback}>
    <TabPane key='1'>
      {status==='1' <ComponentA / > :null }
    </TabPane>
    <TabPane key='2'>
      {status==='2' <ComponentB / > :null }
    </TabPane>
</Tabs>    


const [status,setStatus]=useState('');
const callback=(key)=>{
  setStatus(key)
}

 

點個贊吧
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • redis 工具類 /** * Redis 工具類 */ @Component public class RedisUtil { @Resource private RedisTemplate<String, Object> redisTemplate; public RedisUtil(Redis ...
  • 摘要:query_band是一個會話級別(session)的GUC參數,本身是字元串類型,支持任意形式字元組合。 本文分享自華為雲社區《GaussDB(DWS)的query_band負載識別與應用》,作者:門前一棵葡萄樹。 query_band概述 GaussDB(DWS)實現了基於query_ba ...
  • 摘要:多跳查詢能力也是一個衡量產品性能非常重要的指標。 本文分享自華為雲社區《聊聊超級快的圖上多跳過濾查詢》,作者:弓乙。 在圖資料庫/圖計算領域,多跳查詢是一個非常常用的查詢,通常來說以下類型的查詢都可以算作是多跳過濾查詢: 1.查詢某個用戶的朋友認識的朋友 --二跳指定點label的查詢 2.查 ...
  • 微信小程式雲開發(WeChat Mini Program Cloud Development)是微信官方推出的一種簡化小程式開發的方案。它提供了一個完整的後端雲服務,支持資料庫、存儲、雲函數等功能。在雲開發中,Command 是一個重要的概念,主要用於操作資料庫。 Command 是資料庫命令的構造 ...
  • Redis是一個開源的,基於記憶體的,高性能的鍵值型資料庫。它支持多種數據結構,包含五種基本類型 String(字元串)、Hash(哈希)、List(列表)、Set(集合)、Zset(有序集合),和三種特殊類型 Geo(地理位置)、HyperLogLog(基數統計)、Bitmaps(點陣圖),可以滿足各... ...
  • 4月22日下午14:00,雲資料庫技術和NineData主辦的「MySQL x ClickHouse」技術沙龍,將在杭州市海智中心3號樓1102報告廳舉辦。本次沙龍以“技術進化,讓數據更智能”為主題,匯聚位元組跳動、阿裡雲、玖章算術、華為雲、騰訊雲等眾多資料庫廠商的技術大咖, 圍繞MySQL x Cl... ...
  • 新媒體時代,廣告樣式越來越豐富。相較於傳統的圖文信息,視頻類廣告更具有直觀性,能夠讓消費者在瞭解產品知識和功能的同時加深對產品的印象。 因此在各類網站或App上投放視頻類廣告是個很好的宣傳方式,但廣告商們如果想在網站上展示視頻廣告,必須確保視頻廣告投放協議與發佈渠道的播放器相容;如果不能相容,廣告商 ...
  • ChatBox 是什麼 開源的 ChatGPT API (OpenAI API) 桌面客戶端,Prompt 的調試與管理工具,支持 Windows、Mac 和 Linux。 為什麼需要它 每次想訪問 ChatGPT 時,都需要在瀏覽器中輸入 ChatGPT 網址,然後點擊登錄,選擇賬號,整個過程中比 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...