antd报错Instance created by `useForm` isnot connected to any Form element. Forget to pass `form` prop

问题描述

提示：在使用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>

解决方案：

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

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

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

2. 监听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>