ant design Tabs组件 切换重新获取请求

使用ant design 的Tabs组件过程中，遇到切换需要重新获取数据的场景。

image.png

但是tabs组件本身切换时，是不销毁子组件内容的，不会重新加载，解决方案是：

import { Tabs, Button } from 'antd';
import ElectricalSafety from './electricalSafety';   // 用电安全
import EnergyMonitor from './energyMonitor';   // 能耗监测
const { TabPane } = Tabs;

const SmartHydropower = (props) => {
  const [curTabKey,setCurTabKey] = useState('1')
  // 点击“设备管理”fn
  const jumpManage = ()=>{
    router.replace('/deviceManage');
  }

  // 切换tab的回调
  const changeTabs = (activeKey)=>{
    setCurTabKey(activeKey)
  }

  const operations = <Button type="primary" onClick={jumpManage}>设备管理</Button>;

  return (
    <div className={styles.container}>
      <Tabs tabBarExtraContent={operations} onChange={changeTabs} >
        <TabPane tab="用电安全" key="1">
          {curTabKey ==='1' ? <ElectricalSafety /> : <div></div> }
        </TabPane>
        <TabPane tab="能耗监测" key="2">
          {curTabKey ==='2' ? <EnergyMonitor /> : <div></div> }
        </TabPane>
      </Tabs>
    </div>
  )
};
export default SmartHydropower;