【实战】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 属性

三、拓展学习

1.form

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

---