场景: 

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

官方解释: 这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件

 

Form包裹在Modal中:

如果你的Form表单是包裹在Modal对话框中, 官方解决办法是:  通过给 Modal 设置 forceRender 将其预渲染。示例点击此处。

 

hooks函数组件:

我遇到的错误代码来自react hooks, 所以本文重点分解hooks代码.

错误代码(全网都是这么用的, 不知道为什么大家没有错误):

// 错误用法
import React, { useRef } from 'react';
import { Form } from 'antd';

const FormComp = () => {
  const [form] = Form.useForm();
  
  const onValuesChange = (val) => {
      //form.setFieldsValue, form.resetFields等等都会报错
      form.setFieldsValue({val}) // 控制台报错: Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?
  };

  return (
      <Form>
        <Form.Item><Input /></Form.Item>
      </Form>
  );
};
export default FormComp;

正确代码: 

// 正确用法
import React, { useRef } from 'react';
import { Form } from 'antd';

const FormComp = () => {
  const formEl = useRef(null);
  
  const onValuesChange = (values: any) => {
      formEl.current.setFieldsValue({val})); // success
  };

  return (
      <Form ref={formEl}>
        <Form.Item><Input /></Form.Item>
      </Form>
  );
};
export default FormComp;

 

class类组件:

参考: react antd 设置Form表单值 / 清空Form表单 Form.useForm 报错