关于react表单作为子组件重复渲染的问题

664 阅读1分钟

场景:

antd组件,弹出层中的编辑表单

问题描述:

在对表格数据查看编辑时,遇到个问题。在表单的Model组件渲染作为子组件时,多次点击Model弹框,Model都只会渲染第一点击的数据,但是子组件接收的数据都是最新的,就是表单的数据没有重新渲染更改。

image.png

原因:

当第一次点开Modal的时候, 会得到一个initialValue,但是这个值只在组件挂载的时候执行了一次,后续数据的更新并不会造成重新渲染,所以再次打开Modal窗口的时候并没有更新。

解决方案

方法一

在查看文档后,官方页给出了解决方案

image.png

image.png

方法二

使用form.resetFields(),当关闭弹窗的时候,清除原有数据。再次打开时,就会重新渲染数据。