头图

一次说清,为什么在Antd Modal中调resetFields调了个寂寞

Denzel
English

背景

在干了大半年增删查改后(node,mysql,serverless),业务端人手短缺,老板开恩让我支持其他团队写几个页面。

久了不摸手生,除了react依稀记得,antd基本只能看着官方demo一行一行写,感觉一天能写完的,结果两天了还没联调完。中间还遇到一些似曾相识的问题,可惜以前的经验已经不管用了。

demo地址: https://codesandbox.io/s/antd...

这些问题在antd的仓库issue都反复被提及,看了下文,包括但不限于以下问题都将得到答案:
20211221224910

概括一下:

  • Form表单,React hooks 组件,initialValues初始化数据时候,第二次、第三次……传递新值,表单没有更新,永远显示第一次数据?
  • 弹出层新建表单重新设置值不起作用?

    • Modal 用了destroyOnClose,里面有 Form,并使用 form.resetFields,为什么会失效?
    • Modal中initialValues更新了,使用了form.resetFields,要连续打开两次才生效?

有事说事

语言描述显得太苍白,所以直接看动图吧:
reset-small

这是一个简单的增删查改页面,新增和编辑共享了同一个组件,期望在打开弹窗编辑表单关闭后,重新打开时,能根据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的创建有一个异步过程,所以子组件的渲染并不是同步的。正常的组件渲染是下面这样的:

20211223222510

只需和我上面一样,在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是个好东西,前提是你会用;
  • 我还是太菜了;

欢迎关注我的前端公众号:前端黑洞

阅读 6.6k

前端黑洞
生命不息,奋斗不止

不要假装很努力,因为结果不会陪你演戏

3.3k 声望
4.6k 粉丝
0 条评论

不要假装很努力,因为结果不会陪你演戏

3.3k 声望
4.6k 粉丝
文章目录
宣传栏