Ant-Design组件中,在Modal 中加入Table组件,为什么Modal 关闭时 ,Table中数据不会更新重新渲染?有什么方法可以让表格中的数据重新渲染?

Ant-Design组件中,在Modal 中加入Table组件,为什么Modal 关闭时 ,Table中数据不会更新重新渲染?有什么方法可以让表格中的数据重新渲染?

在Ant Design的Modal组件中,关闭Modal时,Table组件中的数据不会重新渲染的原因是,Modal组件默认是通过隐藏和显示来实现显示和关闭的,而不是通过销毁和重新渲染组件。

为了让表格中的数据重新渲染,可以通过以下几种方法:

  1. 使用forceUpdate方法:在Modal关闭时,手动调用Table组件的forceUpdate方法来强制更新组件。在Modal的onCancel或onClose事件中,调用Table组件的forceUpdate方法即可。
 {
    setModalVisible(false);
    tableRef.current.forceUpdate();
  }}
>
  
  1. 控制数据源更新:在Modal关闭时,手动更新Table组件的数据源,然后重新渲染组件。在Modal的onCancel或onClose事件中,更新数据源并重新渲染Table组件。
const [dataSource, setDataSource] = useState([]);

 {
    setModalVisible(false);
    setDataSource(newDataSource); // 更新数据源
  }}
>
  
  1. 使用key属性:给Table组件添加一个唯一的key属性,并在Modal关闭时,更新key值。这样会触发React重新渲染Table组件。
const [tableKey, setTableKey] = useState(0);

 {
    setModalVisible(false);
    setTableKey(tableKey + 1); // 更新key值
  }}
>
  

以上方法中,可以根据具体情况选择适合的方法来让表格中的数据重新渲染。

你可能感兴趣的:(学习记录—React+Antd,前端)