解决 Antd 报错Warning:Instance created by `useForm` is not connect to any Form element
Ant Design of React
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
+
✨ 特性#
-
🌈 提炼自企业级中后台产品的交互语言和视觉风格。
-
📦 开箱即用的高质量 React 组件。
-
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
-
⚙️ 全链路开发和设计工具体系。
-
🌍 数十个国际化语言支持。
-
🎨 深入每个细节的主题定制能力。
兼容环境#
问题描述
antd: 4.2.0, react: 16.13.1 Modal 中使用 Form ，使用 React Hooks const [form] = Form.useForm(); 创建实例时，会出现以下警告。
问题原因
页面初始化，调用 form 方法时，因为 Modal 还未初始化，导致 form 这时候还没有挂载的 element，这时候调用form的方法就会报错， 此时 form 没有关联任何 Form 组件。
解决方案 一：
Modal 添加属性 getContainer={false} ，使其挂载在当前 dom。
<Modal
getContainer={false}
title="修改分类"
visible={showStatus === 2}
onOk={handleOk}
onCancel={() => setShowStatus(0)}
>
<Form
form={form}
onFinish={onFinish}
>
<Item name="categoryName">
<Input placeholder="请输入分类名称"/>
</Item>
<Item>
<Button htmlType="submit">提交</Button>
</Item>
</Form>
</Modal>
解决方案二：
Modal 组件 设置 forceRender 属性
form 需要设置 form = { form }
解决方案三：
如果form确实需要延迟渲染，比如dom写在hooks里，通过函数来渲染。可以使用fields属性。
https://ant-design.antgroup.com/components/form-cn/#components-form-demo-customized-form-controls
表单成为受控组件。
const [fields, setFields] = useState([
{
name: ['content'],
value: '111',
},
])
<Form
fields={fields}
labelCol={{ span: 4 }}
wrapperCol={{ span: 17 }}
scrollToFirstError={true}
onFinish={handleFinish}
onFinishFailed={handleFinishFailed}
>
<Form.Item
label="11"
name="content"
rules={[
{
required: true,
message: '请输入评论内容！',
},
]}
>
<TextArea
showCount
maxLength={100}
rows={5}
ref={inputEl}
placeholder="友善是交流的起点"
/>
</Form.Item>
<Form.Item
wrapperCol={{ offset: 0, span: 17 }}
className="m-modal-footer"
>
<Button
type="primary"
htmlType="submit"
className="m-space"
>
<Icon name="submit" className="m-tool-btn-icon"></Icon>
发布
</Button>
</Form.Item>
</Form>参考链接：
