使用ant.design中的Modal组件和Form组件控制台提示Instance created by
useFormis not connected to any Form element. Forget to pass
formprop?
报错,原因是调用Form.useForm()方法时Form element还未初始化,无法挂载方法。以下是解决方法。
1、ant.design官方给出的解决方案
给Modal组件添加forceRender属性,将Modal组件进行预渲染
<Modal title="Basic Modal" visible={props.visible} forceRender />
2、将Form赋值放在Form element初始化以后(推荐)
const UserModal = (props) => {
const [form] = Form.useForm();
useEffect(() => {
if(props.visible){
//显示Modal弹窗时,对form进行赋值
form.setFieldsValue(props.record);
}
}, [props.visible]);
return (
<div>
<Modal
title="Basic Modal"
visible={props.visible}
onOk={props.handleOk}
onCancel={props.handleCancel}
>
<Form name="basic" form={form}>
<Form.Item
label="name"
name="name"
rules={[{ required: true, message: "Please input your name!" }]}
>
<Input />
</Form.Item>
</Form>
</Modal>
</div>
);