Ant-Design组件中,在Modal 中加入Table组件,为什么Modal 关闭时 ,Table中数据不会更新重新渲染?有什么方法可以让表格中的数据重新渲染?
在Ant Design的Modal组件中,关闭Modal时,Table组件中的数据不会重新渲染的原因是,Modal组件默认是通过隐藏和显示来实现显示和关闭的,而不是通过销毁和重新渲染组件。
为了让表格中的数据重新渲染,可以通过以下几种方法:
- 使用forceUpdate方法:在Modal关闭时,手动调用Table组件的forceUpdate方法来强制更新组件。在Modal的onCancel或onClose事件中,调用Table组件的forceUpdate方法即可。
<Modal
visible={modalVisible}
onCancel={() => {
setModalVisible(false);
tableRef.current.forceUpdate();
}}
>
<Table dataSource={dataSource} columns={columns} />
</Modal>
- 控制数据源更新:在Modal关闭时,手动更新Table组件的数据源,然后重新渲染组件。在Modal的onCancel或onClose事件中,更新数据源并重新渲染Table组件。
const [dataSource, setDataSource] = useState([]);
<Modal
visible={modalVisible}
onCancel={() => {
setModalVisible(false);
setDataSource(newDataSource); // 更新数据源
}}
>
<Table dataSource={dataSource} columns={columns} />
</Modal>
- 使用key属性:给Table组件添加一个唯一的key属性,并在Modal关闭时,更新key值。这样会触发React重新渲染Table组件。
const [tableKey, setTableKey] = useState(0);
<Modal
visible={modalVisible}
onCancel={() => {
setModalVisible(false);
setTableKey(tableKey + 1); // 更新key值
}}
>
<Table key={tableKey} dataSource={dataSource} columns={columns} />
</Modal>
以上方法中,可以根据具体情况选择适合的方法来让表格中的数据重新渲染。