乐趣区

关于antd:一次说清为什么在Antd-Modal中调resetFields调了个寂寞

jiezi

背景

在干了大半年增删查改后（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 是个好货色，前提是你会用；
  • 我还是太菜了;

欢送关注我的前端公众号：前端黑洞

退出移动版