Warning: Instance created by useForm is not connected to any Form element. Forge

150 阅读1分钟

错误原因

在antd Moadl中使用From组件时候报错 这是因为你在调用 form 方法时,Modal 还未初始化导致 form 没有关联任何 Form 组件

image.png

import { Form , Modal } from "antd"

const Test = () =>{
    const [form] = Form.useForm();

    useEffect(() => {
         form.setFieldsValue({name:"yq"});
     }, []);

    retrun (
        <Modal visible=visible{}>
            <Form form={form}>
                <From.Item name="name">
                    <Input />
                </From.Item>
            </From>
        </Modal>
    )
}

export default Test

解决办法

在useEffect中加上modal弹窗显示的判断

import { Form , Modal } from "antd"

const Test = () =>{
    const [form] = Form.useForm();

    useEffect(() => {
        if (visible) { // 弹窗显示才进行form操作
          form.setFieldsValue({name:"yq"});
        }
     }, [form, visible]);

    retrun (
        <Modal visible=visible{}>
            <Form form={form}>
                <From.Item name="name">
                    <Input />
                </From.Item>
            </From>
        </Modal>
    )
}

export default Test