關於react的Tabs組件中TabPane的bug

今天解決了我自認為一個很不起眼的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)
}