为什么 Modal 关闭时,内容不会更新?
原理
Modal 在关闭时会将内容进行 memo 从而避免关闭过程中的内容跳跃。也因此如果你在配合使用 Form 有关闭时重置 initialValues 的操作,请通过在 effect 中调用 resetFields 来重置。
解决方案
1)因此Modal 与 Form 配合使用时,点击关闭按钮 内容也是不会销毁,需要手动在Form中设置 preserve={false} (当字段被删除时不保留字段值)
2)在useEffect中判断,如果modal状态发生改变,用form.resetFields()重置表单数据
useEffect(() => {
if (props?.visible) {
(获取数据之类的)
} else {
formInstance.resetFields()
}
}, [props?.visible])
<Modal visible={props?.visible}>
<Form
form={formInstance}
preserve={false}
>
<巴拉巴拉>
</Form>
</Modal>