ant Modal 上的EditableProTable编辑数据后，再次打开弹窗数据依然还在

南城夏季

于 2023-05-26 17:21:43 发布

阅读量933

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记 BUG react 文章标签：前端 javascript react.js

本文链接：https://blog.youkuaiyun.com/weixin_39818813/article/details/130891010

BUG 同时被 3 个专栏收录

86 篇文章

订阅专栏

react

53 篇文章

订阅专栏

笔记

39 篇文章

订阅专栏

在使用Modal组件时，由于子组件EditableProTable未被正确销毁，导致关闭后再打开弹窗，之前输入的数据仍然存在。通过添加`destroyOnClose`属性到Modal，确保子组件在关闭时被销毁，从而解决数据保留的问题。另外，使用不同的`key`也可实现相同效果，防止组件状态被保留。

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

1.代码

    <Modal
      width={1200}
      maskClosable={false}
      title="返修单确认"
      keyboard={false}
      open={show}
      footer={false}
      onCancel={returnModal}
    >
     <EditableProTable actionRef={actionRef} value={dataSource} ></EditableProTable>
  </Modal>

打开弹窗后，编辑表格中的数据，关闭弹窗，再打开弹窗发现输入框的数据还在

即使执行了以下的重置操作，数据也还在

    setSelectedRows([]);
    setDataSource([]);
    setEditableRowKeys([]);
    actionRef.current?.reloadAndRest();

实际上关闭弹窗，子组件是一直没有销毁的，也就是EditableProTable 输入框会一直保存其状态，当然也包括它的数据，所以为了完全销毁组件可以modal上加个属性，也可以给modal加个key，每次打开的时换一个不同的key

2.修复

    <Modal destroyOnClose
      width={1200}
      maskClosable={false}
      title="返修单确认"
      keyboard={false}
      open={show}
      footer={false}
      onCancel={returnModal}
    >
     <EditableProTable actionRef={actionRef} value={dataSource} ></EditableProTable>
  </Modal>