问题描述

项目在本地开发和测试环境中，点击按钮，具有Form表单的Modal对话框正常弹出，但是到了uat环境就报警告了，警告如下图：

意思是：警告：“useForm”创建的实例未连接到任何Form元素。忘记传递“form”道具了吗？
这个警告通常是因为在使用 antd 的 Form 组件时，没有将 form 对象与 Form 组件进行关联。但是我代码中已经定义了form，并且From表单定义了form={form},但是还报警告，代码如下：

import React from 'react';
import { Form, Input } from 'antd';
const Demo = () => {
    const [form] = Form.useForm();
    const handleTest = () => {
        setEditVisible(true);
        form.setFieldsValue({username: '用户', test: '测试输入'});
    }
    const handleConfirmSet = () => {
        
    }
    return (
        <div>
            <Button onClick={handleTest} style={{marginRight: 10}}>
                测试
            </Button>
            <Modal
                open={editVisible}
                width={600}
                title={'测试'}
                onOk={() => { handleConfirmSet() }}
                onCancel={() => {
                    setEditVisible(false);
                }}
            >
                <Form form={form}>
                    <Form.Item name="username" label="用户名">
                        <Input />
                    </Form.Item>
                    <Form.Item name="test" label="测试输入">
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};
export default Demo;

原因

在调用form的实例时，Modal内部的组件并未渲染，才导致了该错误，如果遇到了，设置值没设置上，原因也是先设置了值，但表单dom还没渲染完。

解决方案

利用Modal的forceRender或者form.setFieldsValue({...xxx})放到定时器里。
从antd官网也找到了该解决方案

需要注意的是，当 forceRender 为 true 时，Modal 组件会在第一次渲染时就会渲染子组件，这可能会导致一些组件的生命周期函数提前执行，从而产生一些不符合预期的结果。因此，在使用 forceRender 属性时，需要特别注意 Modal 中子组件的生命周期函数的执行顺序和时机。总的来说，forceRender 属性可以在 Modal 渲染时立即渲染子组件，从而提高用户体验，但是也可能会对性能造成一定的影响。在使用时需要根据具体情况进行权衡和选择。

错误：Instance created by `useForm` is not connected to any Form element. 的处理方法

问题描述

原因

解决方案