背景
在干了大半年增删查改后（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是个好货色，前提是你会用；
- 我还是太菜了;
欢送关注我的前端公众号：前端黑洞