共计 3104 个字符，预计需要花费 8 分钟才能阅读完成。
背景
在干了大半年增删查改后（node，mysql，serverless），业务端人手短缺，老板开恩让我反对其余团队写几个页面。
久了不摸手生，除了 react 依稀记得，antd 根本只能看着官网 demo 一行一行写，感觉一天能写完的，后果两天了还没联调完。两头还遇到一些似曾相识的问题，惋惜以前的教训曾经不论用了。
demo 地址: https://codesandbox.io/s/antd…
这些问题在 antd 的仓库 issue 都重复被提及，看了下文，包含但不限于以下问题都将失去答案：
概括一下：
- Form 表单，React hooks 组件，initialValues 初始化数据时候，第二次、第三次……传递新值，表单没有更新，永远显示第一次数据？
-
弹出层新建表单从新设置值不起作用？
- Modal 用了 destroyOnClose，外面有 Form，并应用 form.resetFields，为什么会生效？
- Modal 中 initialValues 更新了，应用了 form.resetFields，要间断关上两次才失效？
有事说事
语言形容显得太红润，所以间接看动图吧：
这是一个简略的增删查改页面，新增和编辑共享了同一个组件，冀望在关上弹窗编辑表单敞开后，从新关上时，能依据 initialValues 从新渲染表单, 但失去的后果是，第二次关上，编辑框没有刷新.
实现的伪代码大抵是这样：
import React, {useEffect} from "react";
import {Modal, Form, Input, Button, Checkbox} from "antd";
export function EditModal(props) {const { visible, onOk, onCancel, content = {} } = props;
const [form] = Form.useForm();
const isEdit = !!content.sort;
const handlSubmit = (close) => {// 一些提交逻辑};
useEffect(() => {// setTimeout(() => {form.resetFields();
// });
}, [content]);
return (
<Modal
title={`${isEdit ? "编辑" : "新建"} 备注 `}
visible={visible}
destroyOnClose
onOk={onOk}
onCancel={onCancel}
>
<Form
name="basic"
labelCol={{span: 7}}
wrapperCol={{span: 14}}
form={form}
initialValues={content}
autoComplete="off"
>
{... 一些表单}
</Form>
</Modal>
);
}
置信呈现问题的盆友们，大多都是和我一样，如下面这样的代码这样实现。
具体问题，具体分析
先给论断，之所以会呈现下面的那些问题，次要是三个问题导致：
- react hooks 应用姿态不正确，antd4 form 引入了 hooks, 和 antd3 应用有所区别;
- 对 form 表单 initialValues 的认识不清；
- Modal 子元素的渲染是异步的，destroyOnClose 谬误应用;
initialValues 初始化数据时候，第二次、第三次……传递新值，表单没有更新？
因为 initialValues 只在表单首次初始化时无效，只有表单没有卸载并从新挂载，扭转 initialValues 都不会刷新表单的值，form 最后的设计就如此；以下是 initialValues 初始化存到 store 的残缺实现：
this.setInitialValues = function (initialValues, init) {_this.initialValues = initialValues || {};
if (init) {// setValues 作用相似于 Object.assign()；_this.store = setValues({}, initialValues, _this.store);
}
};this.store 是寄存在 form 实例中的，只有实例不销毁，store 的值就不会变动。
destroyOnClose，弹出层新建表单从新设置值不起作用？
首先这里有个概念，initialValues 在 Form 表单实例挂载时，这个值是被存在了用 hooks 生成的 form 实例中。
所以当咱们应用了 destroyOnClose，尽管销毁了 Modal 以及 Modal 框中的 Form，但这个 form 实例依然存在，这个 hook 实例是挂载在 EditModal 元素上的，并没有被一起销毁，所以当弹窗再次关上，Form 表单又会依据这个 form 的 store 再次渲染（起因见上）。
Modal 用了 destroyOnClose，外面有 Form，并应用 form.resetFields，为什么会生效？
当咱们意识到 form 实例没有被销毁，可能保留了上一个表单编辑状态时，咱们会想到应用 useEffect 钩子，去察看初始值，采纳 form.resetFields 去重置实例，但最初发现这并没有起作用（我也踩到了这个坑上）。
当我去掉 destroyOnClose，我发现失效了，前面我去看了一下 form.resetFields 的实现源码：
this.resetFields = function (nameList) {
var prevStore = _this.store;
if (!nameList) {// console.log(JSON.stringify(prevStore), JSON.stringify(_this.initialValues));
_this.store = setValues({}, _this.initialValues);
_this.resetWithFieldInitialValue();
_this.notifyObservers(prevStore, null, {type: 'reset'});
return;
}
}这个实现和 initialValues 一样简单明了，所以问题不在 resetFields。问题是出在 Modal 身上，简略来讲 Moda 的创立有一个异步过程，所以子组件的渲染并不是同步的。失常的组件渲染是上面这样的：
只需和我下面一样，在 resetFields 加一句 console, 就会发现_this.initialValues 是上一次的初始值，而不是新传入的（因为 Form 元素还未挂载）, 所以这里 resetFields 调了个寂寞。
还有一种简略的办法证实 Modal 组件的子组件挂载是异步的，就是如上面这样去玩：
useEffect(() => {setTimeout(() => {form.resetFields();
});
}, [content]);这个实现，你会发现 resetFields 竟然失效了，因为一个宏工作后，Form 元素曾经挂载上。
所以这里通知咱们，要尽量少用 destroyOnClose，因为 Modal 的渲染是耗时的且费劲的。
Modal 应用了 form.resetFields 初始化，要间断关上两次才失效？
置信通过下面的一系列解释，你的心中曾经有了答案；destroyOnClose 的确不适宜在 Modal 中写表单时用。
所以，Modal 中重置 Form initalValues 的正确姿态了吗？
慎点
吃一堑，长一智
这一次经验后，我记住了：
- destroyOnClose 要慎用，因为 Modal 的渲染是低廉的；
- hooks 是个好货色，但你得用对；
- antd 是个好货色，前提是你会用；
- 我还是太菜了;
欢送关注我的前端公众号：前端黑洞
