Ant Design Modal内嵌Form表单initialValue值不动态更新

问题描述：

在antd pro中使用弹窗modal编辑数据

1. 列表中的值无法赋值给弹窗
2. form 表单中 initialValue只能显示第一次传进来的值，之后传入的值都无法显示
3. Instance created by useForm is not connected to any Form element. Forget to pass form prop?

解决方法：

重点为两段代码

1. 使用Form.useForm()方法<From form={from}></From>将form值与form表单绑定，然后在useEffect中将父组件传递过来的props.value赋值

import { Form, Modal } from 'antd';
const [form] = Form.useForm();
    useEffect(() => {
        form.resetFields();
        form.setFieldsValue(props.values);
})

1. form表单属性forceRender={true}，解决控制台提示Instance created by useForm is not connected to any Form element. Forget to pass form prop? 完整代码如下：

import React, { useEffect } from 'react';
import { Form, Modal } from 'antd';
import { School } from '../data';
import { ProFormText } from '@ant-design/pro-form';

export type SchoolFormProps = {
    onCancel: () => void;
    onSubmit: () => Promise<void>;
    modalVisible: boolean;
    values: Partial<School>;
}

const SchoolForm: React.FC<SchoolFormProps> = (props) => {
    const [form] = Form.useForm();
    useEffect(() => {
        form.resetFields();
        form.setFieldsValue(props.values);
    })

    return (
        <Modal
            width="500px"
            visible={props.modalVisible}
            onCancel={props.onCancel}
            forceRender={true}
            title={`${props.values.id ? '编辑' : '添加'}学校`}
            onOk={props.onSubmit}
        >
            <Form form={form}>
                <ProFormText name="name" label="学校名称"></ProFormText>
                <ProFormText name="address" label="详细地址"></ProFormText>
                <ProFormText name="contact" label="联系电话"></ProFormText>
            </Form>
        </Modal>
    )
}

export default SchoolForm;