Ant Design <Modal /> destroyOnClose 设置无效

项目中使用的Ant Design 版本为 4.6.5

和 Form 一起配合使用时，设置 destroyOnClose 属性，我们的心里预期是关闭Modal 框可以直接销毁form 包括 useForm 里的数据，但实际上关闭 Modal 框后并没有销毁form 包括 useForm 里的数据。其原因是 destroyOnClose 只是 Modal 的API，只会处理 Modal 相关的逻辑，和表单的逻辑是解耦的，两者没有关系。

官方给出的解决方案是：<Modal /> 和 Form 一起配合使用时，设置 destroyOnClose 为 false，并且还需要设置 <Form preserve={false} /> 。

但在实际测试中发现，destroyOnClose 设置为 false，并且也设置了 <Form preserve={false} />，关闭 Modal 框后也还是没有清空 Form表单里的值, 还需要手动设置 form.resetFields() 来重置Form 表单的值。

import React, { useState, useEffect } from 'react';
import {
  Modal,
  Form
} from 'antd';
import { connect } from 'dva';
import { ConnectState, ConnectProps } from '@/models/connect';

export interface PlanParamsProps extends ConnectProps, ConnectState { }

const PlanParams: React.FC<PlanParamsProps> = props => {
  const {
    planContentEdit: {
      editRecord,
    }
  } = props;

  const [form] = Form.useForm();
  const [paramsEditType, setParamsEditType] = useState<string>('');

  useEffect(() => {
    form.resetFields();
  }, [editRecord, paramsEditType]);

  return (
      <Modal
        destroyOnClose={false}  // 与 <Form />配合使用时， Modal 关闭时销毁表单字段数据，需要设置 <Form preserve={false} /> 但不能设置 destroyOnClose 为 true
      >
        <Form
          form={form}
          preserve={false}
        >
          {/* ... */}
        </Form>
      </Modal>
  );
};

export default connect(({ planContentEdit }: ConnectState) => ({
  planContentEdit
}))(PlanParams);

当依赖项[editRecord, paramsEditType]发生变化时，在 useEffect 里重置 form 表单的值.