解决 Antd 报错Warning:Instance created by `useForm` is not connect to any Form element

问题描述

antd: 4.2.0, react: 16.13.1 Modal 中使用 Form ，使用 React Hooks const [form] = Form.useForm(); 创建实例时，会出现以下警告。

Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?

问题原因

页面初始化，调用 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 }