antd报错Instance created by `useForm` isnot connected to any Form element. Forget to pass `form` prop
组件报错
·
问题描述
提示:在使用antd组件时,出现如标题报错:
// 在使用hooks const [form] = Form.useForm()时,明明我已经绑定确定的Form,却还是出现如下错误:
Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?
原因分析:
提示:使用了Modal组件
例如:我在Form外层包裹了Modal(Drawer同理)组件,在调用form的实例时,Modal内部的组件并未渲染,才导致了如此错误。
const [form] = Form.useForm();
useEffect(() => {
form.setFieldsValue({...xxx})
}, [form])
// dom
<Modal>
<Form form={form} />
</Modal>
解决方案:
提示:主要解决方案两种想法:
- 强制Modal渲染 通过antd提供的forceRender属性即可
const [form] = Form.useForm();
useEffect(() => {
form.setFieldsValue({...xxx})
}, [form])
// dom
<Modal forceRender>
<Form form={form} />
</Modal>
- 监听Form是否渲染
const [form] = Form.useForm();
const formRef = useRef(null);
useEffect(() => {
if (formRef.current) {
form.setFieldsValue({...xxx})
}
}, [form])
// dom
<Modal forceRender>
<Form form={form} ref={formRef}/>
</Modal>
更多推荐
所有评论(0)