解决react项目结合Ant-Design的Tabs组件时，tab切换不刷新导致数据不同步更新的问题

最新推荐文章于 2024-06-07 16:40:53 发布

我是一个粉刷匠呀

最新推荐文章于 2024-06-07 16:40:53 发布

阅读量7.7k

点赞数

分类专栏： react+ant-design 文章标签： ant react tab

本文链接：https://blog.youkuaiyun.com/weixin_42215167/article/details/118028710

版权

react+ant-design 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在React项目中使用Ant Design的Tabs组件时遇到的tab切换不刷新问题，导致数据不同步更新。通过监听Tabs的onChange回调，并在子组件中利用componentDidUpdate生命周期方法，对比props来实现数据的正确刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景介绍

两个tab，一个已接受，一个已拒绝，在已接受中可以进行拒绝操作，拒绝后在已拒绝tab中会展示刚刚拒绝的那条数据。问题：拒绝后点击展示已拒绝tab,发现并没有更新

 <Tabs defaultActiveKey={currentKey} onChange={this.onTabChange}>
          {
            tabs.map((item) => (
              <Tabs.TabPane tab={item.title} key={item.key}>
                <item.component type={type} />
              </Tabs.TabPane>
            ))
          }
        </Tabs>

解决

使用Tabs的onChange回调，
在这里插入图片描述
使用该回调，

 onTabChange = (tabKey) => {
    this.setState({
      type:tabKey
    })
  }

然后在子组件中使用 componentDidUpdate生命周期函数
componentDidUpdate的第一个参数为 preProps 表示上一次的props
componentDidUpdate参数详解

componentDidUpdate(preProps ){
   if(preProps.type!==this.props.type){
      //放置刷新函数
   }
}