问题描述

提示：在使用antd组件时，出现如标题报错：

在使用hooks const [form] = Form.useForm()时，明明我已经绑定确定的Form，却还是出现如下错误：

	Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?

---

原因分析：

提示：使用了Modal组件

例如：我在Form外层包裹了Modal（Drawer同理）组件，在调用form的实例时，Modal内部的组件并未渲染，才导致了如此错误。

    const [form] = Form.useForm();
    useEffect(() => {
      form.setFieldsValue({...xxx})
    }, [form])
   // dom
	<Modal>
	  <Form form={form} />
	</Modal>

---

解决方案：

提示：主要解决方案两种想法：

• 强制Modal渲染
• 监听Form是否渲染

• 强制Modal渲染，通过antd提供的forceRender属性即可，

    const [form] = Form.useForm();
    
    useEffect(() => {
      form.setFieldsValue({...xxx})
    }, [form])
    
   // dom
	<Modal forceRender>
	  <Form form={form} />
	</Modal>

• 监听Form是否渲染

    const [form] = Form.useForm();
    const formRef = useRef(null);
    
    useEffect(() => {
      if (formRef.current) {
         form.setFieldsValue({...xxx})
      }
    }, [form])
    
   // dom
	<Modal forceRender>
	  <Form form={form} ref={formRef}/>
	</Modal>