有双叒叕报错了🚀🚀🚀
前景提要
使用 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的设置useEffect或useRef用起来
- 显示加隐藏的容器,确保显示了,在做