antd使用Form.useForm()报hook错误

最新推荐文章于 2024-10-14 16:15:33 发布
最新推荐文章于 2024-10-14 16:15:33 发布
阅读量2.2k 收藏 1
点赞数 2
文章标签： antd react hook form use form ref form
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38318244/article/details/117295961
版权

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:

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

原因：
在这里插入图片描述

Form.useForm是React Hooks的实现，所以只能用于react hooks

所以这里改用ref

初始化：在这里插入图片描述
绑定：
在这里插入图片描述

验证：
在这里插入图片描述

仙女爱吃鱼
关注
react-native 中 react-hook-form表单验证
九段刀客的博客
08-06 1302
官方文档地址：https://react-hook-form.com/api/useform/register 1、rules的所有类型 required maxLength minLength max min Pattern validate 2、多msg判断 可对照后面的完整代码查看 rules={{ required: true, validate: () => { if (getValues("firstName").length < 4) {
配置化表单FormRender初尝试
大转转FE
11-03 1385
相信常常做中后台项目的同学都知道，中后台50%的场景和表单有关，并在可灵活配置要求很高，特别是搭建表单配置场景，如果能通过下发JSON配置来生成表单视图的方法，理论上可以提高开发效率。然而，我找到了一个非常好用的 表单 插件,就是通过下发JSON配置来生成表单视图的方法！！！！它就是 FormRender ，一站式中后台 表单解决方案它有什么优点？支持 Ant Design 和 Fusion De...
Form.useForm()报错:Error: Invalid hook call. Hooks can only be called inside of the body
Weston_J的博客
06-24 7019
Form.useForm报错:Error: Invalid hook call. Hooks can only be called inside of the body of a function component.问题描述错误原因示例代码官网说明 问题描述 想使用form提供的Form.useForm() 创建的 form 控制实例，对表单进行赋值取值重置等操作，但在使用formR = Form.useForm()却提示以上错误。 错误原因 这是由于useForm 是 React Hooks 的实现，只
前端大佬都在用的useForm究竟有多强？
最新发布
u012573773的博客
10-14 1006
首先，让我介绍一下 alovajs。它不仅仅是一个普通的请求工具，而是一个能大大简化我们 API 集成流程的新一代利器。与 react-query 和 swr 这些库不同，alovajs 提供了针对各种请求场景的完整解决方案。它有 15+ 个"请求策略"，每个策略都包含状态化数据、特定事件和 actions。这意味着我们只需要很少的代码就能实现特定场景下的请求。我记得第一次使用时，我惊讶地发现原来复杂的请求逻辑可以如此简洁！
antd中Form.useForm()使用方式
llllllhy_的博客
03-10 5117
提交表单，与点击 submit 按钮效果相同，会走 onFinish 方法。经过Form.useForm()创建的form实例中，常用的方法如下。通过 Form.useForm 对表单中数据域进行交互。重置一组字段到 initialValues。获取一组字段名对应的值，并按照对应结构返回。设置表单的值,更新对应的值。
antd使用Form.useForm()获取数据域报错
kramer_light的博客
10-07 1万+
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 (su
antd form方法
zhangyubababa的博客
07-13 1898
Antd@3.x和Antd@4.x有些地方区别还是挺大的。 Form表单的一个常规写法： 1.通过 Form.useForm 对表单数据域进行交互。 const [form] = Form.useForm(); //这里用form要使用在钩子函数里，可以配合react的hook使用， 如果使用react生命周期开发的话可以给form表单添加ref来获取表单数据或者修改数据，（this.formRef = React.createRef();） 获取表单数据：this.formRef.current.g
实现antd中Form、Form.Item组件
qq_43653724的博客
02-27 6970
实现antd中Form、Form.Item组件 初始化项目 使用create-react-app初始化项目后创建MyRcFieldForm文件，代码如下 import React, { Component, useEffect } from 'react'; import Form, { Field } from 'rc-field-form'; //import Form, { Field } from './components/my-rc-field-form/'; import Input fro
antd3 +hook Form
04-05
Here, we import the `useForm` hook from Antd3 and use it to create a new form instance. We then create a form with two form items, one for the username and one for the password. Each form item has a ...
react-hooks父组件提交子组件form
m0_46735106的博客
11-11 1508
父组件： import React, {useRef} from 'react' import UserName from 'src/components/UserName' interface userRef { submit: Function } const UserInfo = () => { const userRef = useRef<userRef>() const checkInfo = () => { Promise.all([user
React + Ant Design 4 使用过程中问题搜集
FreedomX20的博客
04-16 6242
React 和 Ant Design 使用过程中问题搜集
React中使用Ant Design组件库报错 invalid hook call && 组件无法正常显示
qq_45327886的博客
10-17 8973
一、使用Ant Design 的组件报错 Uncaught 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 resons: react.developement.js :1465
antd 的 Form 组件实例的方法（常用）
CASD_HYZ的博客
04-08 2163
form属性：经 Form.useForm()创建的 form 控制实例，不提供时会自动创建。
Invalid hook call. Hooks can only be called inside of the body of a function
热门推荐
qq_46162007的博客
01-18 2万+
Invalid hook call. Hooks can only be called inside of the body of a function
antd的Form表单控制实例的使用
weixin_44956861的博客
07-14 7783
Form表单的控制实例一、业务常景：二、使用Form表单的实例来解决： 一、业务常景： 遇到一种业务场景，即一个简单的Modal框+ Form的一个组合，仔细思考了一下，和我们平时直接使用Form表单还是有一定的区别，我们通常是通过给Form表单绑定onFinish的回调函数，但是这里的业务需求是在model框上点击确定去提交表单，直接通过onFinish函数去回调是不太可行的。 二、使用Form表单的实例来解决： 打开Antd文档，发现有一个form的实例，这里说的稍稍有的绕，他的意思是你需要使用usF
react antd 设置Form表单值 / 清空Form表单 Form.useForm 报错
cc_King的博客
11-19 5647
文章目录错误原因解决办法 （一共三个步骤） 今天使用antd的Form组件时，遇到一个需求，“提交完表单之后需要重置Input框”； 照着手册的方法就一直没有成功。。。比如 const [form] = Form.useForm();这句就没有成功过。。。 错误原因 React Hook "Form.useForm" cannot be called at the top level. React Hooks must be called in a React function component or
AntDesign表单Form实例方法（useForm/ref）
情非得已小猿猿
08-30 8777
1、获取表单实例 函数式组件: const AppletModal: React.FC<any> = (props) => { const [form] = Form.useForm(); } class类组件: import { FormInstance } from 'antd/lib/form'; class AppletEdit extends React.Component<any, any> { form: any = React.cr.
使用antd日期组件的时候报错Invalid hook call
guangmingguangming的专栏
09-15 570
react使用antd时间组件的时候报错Invalid hook call，根据issue ： https://github.com/react-component/picker/issues/130提示，升级antd版本，不再报错
antd 2.2.8 版本 Form表单使用useForm带星号校验和带星号不校验的写法以及不带星号不校验的写法
agua001的博客
04-11 5082
antd 2.2.8 版本 Form表单使用useForm带星号校验和带星号不校验的写法以及不带星号不校验的写法
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值