antd使用Form.useForm()获取数据域报错

最新推荐文章于 2025-10-24 07:45:00 发布

原创最新推荐文章于 2025-10-24 07:45:00 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#ant #reactjs

部署运行你感兴趣的模型镜像

ant design框架下在使用Form.useForm()获取数据域出现如下错误：
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app

开始我认为是调用方式错误，以下是我的源代码：
第一种：

第二种：

然后我删除掉调用，仅剩下两种定义

// 第一种
const [ ywkcForm ] = Form.useForm();
// 第二种
this.state = {
...
ywkcForm: Form.useForm(),
...
}

但仍然出现相同的错误，最后重复查看adtd文档发现有如下提示：
在这里插入图片描述
我使用的是 class component，因此接下来使用ref获取数据域：

经过测试，成功通过ref获取表单数据，并进行重置等操作。
综上所述，在使用class component情况下，应该使用ref方法替代Form.useForm。