【Ant Design】Modal对话框配合Form表单时设置表单域数据

函数组件

// 引入antd组件
import { Form } from 'antd'
// 使用useForm定义表单域
const [form] = Form.useForm()
// 设置表单域数据
form.setFieldsValue({key:value})

类组件

// 引入antd组件
import { Form } from 'antd'
// 使用ref定义表单域
formRef = createRef();
<Form layout="vertical" requiredMark onFinish={this.onFinish} ref={this.formRef}></Form>
// 设置表单域数据
this.formRef.current.setFieldsValue({key:value})

核心代码

// 这是控制Modal显示的方法
// 编辑表单，初始化显示默认数据
showModal = () => {
    this.setState({ isModalOpen: true }, () => {
      this.formRef.current.setFieldsValue({
        key:value
      });
    });
  };

注意

***报错：Uncaught TypeError: Cannot read properties of null (reading ‘setFieldsValue’) ***
打印this.formRef如下：

显然当前form实例为null，自然也就无法进行setFieldsValue操作；

解决方案

<Modal forceRender={true}></Modal>

antd官方文档有如下描述：
Antd Design Modal

有知道具体原因的大佬，麻烦留言，感激不尽！