关于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)
}

 

热门相关:骑士归来   大神你人设崩了   网游之逆天飞扬   第一神算:纨绔大小姐   第一神算:纨绔大小姐