【实战】React 实战项目常见报错 —— Instance created by `useForm` is not connected to any Form element. Forget...

---

一、问题

使用了：

const [form] = Form.useForm();

产生报错：Instance created by useForm is not connected to any Form element. Forget to pass form prop?

二、解决

两种情况都会产生报错：

1.Form element 没有渲染

• 常见于在 模态框（Modal）或侧滑抽屉（Drawer）中使用了表单（Form）

官方文档说：这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染。（https://4x.ant.design/components/form-cn/#为何在-Modal-中调用-form-控制台会报错？）

• 最近又发现一个隐式的使用情况也会导致这个报错：从 form 中解析出来的函数在 Form 组件渲染完成之前使用，比如：

const [ form ] = Form.useForm()
const { getFieldValue, setFieldsValue } = form

return <Form form={form}>
  <Form.Item>...</Form.Item>
  <XComponent value={getFieldValue(fieldName)}/>
</Form>

函数调用改为箭头函数返回形式即可：

value={() => getFieldValue(fieldName)}

2.Forget to pass form prop

没有将 form 绑定到 Form 的 form 属性，需要做显式绑定

const [ form ] = Form.useForm()

return <Form form={form}>
  ...
</Form>

三、拓展学习

1.form

useForm 中提取的 form 相对 props.form 有哪些不同？

文心一言的答案

• useForm 是一个自定义的 React Hook，它可以帮助我们更方便地处理表单相关的逻辑。useForm 通常与 useState 和 useEffect 等其他 React Hooks 一起使用。
• form 属性是从 useForm 中提取的，它是一个表单渲染和管理的基础，可以让我们更加方便地处理表单的同步、提交等操作。相比之下，props.form 是一个直接从父组件传递下来的表单对象，它们可能具有不同的属性和方法，具体取决于父组件如何定义和使用它。

总的来说，form 属性从 useForm 中提取出来后，会包含更多的表单处理逻辑，并且可以与 React 的状态和副作用处理机制更好地集成。而 props.form 则是一个普通的对象，需要我们自己编写相应的逻辑来处理表单的同步、提交等操作。

---