一、问题
使用了:
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
则是一个普通的对象,需要我们自己编写相应的逻辑来处理表单的同步、提交等操作。