ant design 弹框表单出现警告 Instance created by `useForm` is not connected to any Form element

ant design 弹框表单警告–not connected to any Form element

一、问题：

在react+antd的项目中，自定义弹框表单组件(Modal+ Form)，在创建组件过程中出现警告：Instance created by useForm is not connected to any Form element. Forget to pass form prop?

二、思路：

• 中文意思是：由‘useForm ’创建的实例没有连接到任何Form元素，忘记将form传递进来？
• 根据这句话的意思查看了自己的代码发现：在项目中、modal框是一开始就已经创建的、一直存在；但from表单是在弹框打开时才创建；因此当页面初始化时form对象会找不到可关联的Form表单，于是出现上述警告。
• 出现警告的代码：

    const [resData] = Form.useForm();
    useEffect(() => {
       resData.setFieldsValue({
            authorized_api:'',
            authorized_ip:'',
            begin_date:'',
            end_date:'',
            remark:'',
            system_id:null
      });
  })
  

  三、解决

  • 找到原因，就能对症下药啦～
  • 主要原因是在from表单没有创建时就给它赋值 —> 那在from表单创建以后再给from表单赋值即可；

  const [resData] = Form.useForm();
      useEffect(() => {
      if(popShow){     //popShow为true,弹框打开,创建from表单
          resData.setFieldsValue({
              authorized_api:'',
              authorized_ip:'',
              begin_date:'',
              end_date:'',
              remark:'',
              system_id:null
         });
      }
    },[popShow])