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

 问题描述：

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

1. 列表中的值无法赋值给弹窗
2. from 表单中 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);
})

2. 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;