antd 每次打开modal 初始化数据

最新推荐文章于 2024-04-09 13:47:19 发布

叫我虫虫吧

最新推荐文章于 2024-04-09 13:47:19 发布

阅读量1w

点赞数 3

分类专栏： react 问题记录文章标签： antd Modal

本文链接：https://blog.csdn.net/qq_40319394/article/details/105814183

版权

react 问题记录专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在每次打开Modal时通过更改key值来触发组件重新加载数据的方法，利用Math.random()生成唯一key，确保每次弹出Modal时都能获取最新数据。

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

场景：每次打开Modal 重新请求ajax数据，或者初始化Form等数据

解决办法：

1.给modal 添加 destroyOnClose 属性

2.给Modal添加key，每次弹出的时候改变key的值，保证每次key的值不同这里使用了Math.random()

Math.random().toString(32).slice(2)

介绍代码如下：

实际项目代码如下：

父组件：

saveItemProjInfo = (i) => {

   this.setState({myKey: Math.random()});

}

render(){
  const {visible, myKey} = this.state;

return (
  <div>
    <Button onClick={() => this.saveItemProjInfo()}>新增</Button>
   { visible && <CollectTicketsMaintain
      visible={visible}
      myKey={myKey}
      handleCancel={this.handleCancel}
    />}
 </div>
)

}

子元素：

render(){
 const {visible,myKey} = this.props;
 return (
    <Modal
        visible={visible} 
        key={myKey}
    />
)
}