🏃‍♀️🏃‍♀️🏃‍♀️Instance created by useForm is not connect to any Form element

72 阅读1分钟

有双叒叕报错了🚀🚀🚀

前景提要

使用 Antd 开发时,有 Modal 组件嵌入 Form 这种常见需求。

需求内部,需要在 modal visible 的时候,设置一些表单元素的值。

使用 react class 组件的时候,因设置元素在 componentDidMount 中,基本不会出现这样的错误提示。

这种错误常见于 react FC 组件。

控制台报错信息

Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?

Antd UI 组件

  • Modal/Drawer/...等 有显示加隐藏的容器
  • Form.useForm

问题的本质

使用 Form.useForm() 生成 FormInstance 的实例。

我们一般用来消费的也是 FormInstance 的实例, 做一些前置的设置。

在这种首次基本是隐藏,需要出发显示的操作中。

尤其要注意使用 FormInstance 的时候,需要确保视显示图渲染绑定视图完成了。

解决方式

  • 使用 Antd 自带的属性:
    • Form 设置 preserve={false}
    • Modal 设置 destroyOnClose
      • 单页多 modal 请注意设置 z-index, 防止层级显示混乱
  • 一些显示隐藏需要注意的点
    • 显示加隐藏的容器,确保显示了,在做 FormInstance 的设置
      • useEffectuseRef 用起来

结束了