【error】 react 控制台报错Invalid hook call

于 2024-11-06 00:27:33 发布
阅读量608 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 大前端 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chirp_CQ/article/details/143532683

目录

事件起因

我的前端react + ant-design-pro项目能正常启动
在这里插入图片描述
但是网页这边就是一片空白，然后在浏览器的控制台报错：

index.js:1 Warning: 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

在这里插入图片描述

解决办法

导致这个的原因多半都是因为不同版本的react 导致的，我也遇到了，我在多次尝试后发现多半是因为我两个前端项目都同时在本地打开的情况下，webstorm识别到了两个项目的不同react版本

react 的版本信息位于 package.json里

暂时的解决办法是将node_modules 给删除掉，然后重新执行 npm install 命令 安装依赖
在这里插入图片描述

结束语

若是对你有所帮助的话，希望能获得你的 点赞、评论、收藏，这将是对我很大的鼓励！！！ 这对我真的很重要！！！
蟹蟹٩(‘ω’)و

Reacr报错：Hooks can only be called inside the body of a function component.
weixin_45705239的博客
07-18 574
比如你可能正在使用尚不支持 Hooks的版本react-dom(< 16.8.0) 或(< 0.59)。如果违反这些规则，可能会看到此错误。还有一种情况比较少见，
React简单入门 - [Next.js项目] - 页面跳转、AntD组件、二级目录等
Rudon滨海渔村的博客
12-12 1334
页面跳转、AntD组件等。React官网力荐Next.js：为何它取代了Create-React-App？
react报错之Invalid hook call
weixin_61876780的博客
05-18 2146
解决方法：只使用一个版本的react进行代码的编译，比如项目中同时使用了react-router-v5和react-router-v6的两种代码写法，首先在package.json文件中找到我们安装的react-router版本信息，如何再将我们的代码统一写成已安装的版本的格式。大部分时候，都是因为使用了多个版本的react导致的报错，我们可以使用npm list react来检查我们的项目中是否包含了多个版本的react。
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.
Danica的博客
06-22 1956
在react创建项目或者安装路由已经依赖的时候出现，一般情况下是npm安装出现的版本问题，npm很容易出现包的冲突问题。改为yarn安装或者更改为正确的版本。
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
热门推荐
不见浅诗的博客
01-18 3万+
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 ...
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
react出现了Invalid hook call. Hooks can only be called inside of the body of a function component.
weixin_38441229的博客
08-07 2928
/ Hook 只能在函数组件的最顶层使用 function Example() { if (someCondition) { const [count, setCount] = useState(0);在普通的 JavaScript 函数中使用 Hook 在 class 组件中使用 Hook 在自定义 Hook 内部再调用 Hook 在条件判断或循环中使用 Hook。这是因为你在函数组件以外使用了 React Hook。根据 React Hook 规则,Hook 只能在函数组件的最顶层作用域中调用。
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 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
06-06
这个错误通常会出现在函数组件之外或在条件语句、循环语句或嵌套函数中使用React Hook。React Hook只能在React函数组件的主体部分或自定义React Hook中使用。 如果您确定使用React Hook的位置是正确的，则可能是...
前端报错An error occurred in hook 'getAppRootInstance' with payload:
03-19
| `Invalid hook call` | 检查是否在函数组件外调用钩子 | | `Context not provided` | 用`provide/inject`(Vue)或`Context.Provider`(React)包裹组件 | #### 5. 框架特定方案 **Vue 3组合式API：** ```javascript ...
如何组合两个不同版本的react
tangding12的博客
07-05 3919
错误的开始   接到需求，我需要在 react-15 的项目中，嵌入一个最新 react 版本写的编辑器。   刚开始思考的很简单，编辑器是以包的形式发布在公司私有 npm 上的 -> npm 包是编译完发版上去的 -> 只要保证编辑器使用自己打包编译的 react 就不会造成影响。   为了保证打包进准确的依赖版本，我特意把 react 和相关的一些组件包申明在 dependencies 中， { "name": "editor", "version": "0.0.1", "de
uncaught runtime errors: error at handleError(webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:300:58) at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:300:58)
最新发布
03-30
| `Invalid hook call` | React 版本与组件库不兼容 | 统一 React 和 React-DOM 版本 | | `Failed to fetch dynamically imported module` | 路由组件路径错误 | 检查 `import()` 路径或配置 `publicPath` | --- #...
Invalid hook call. Hooks can only be called inside of the body of a function component.
我家猫叫佩奇の博客
03-16 2万+
Erro: 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 t...
npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...
卡尔特斯
09-06 1983
包即可，但是这种方式不推荐，毕竟删了打包组件库时就报错了，还得重新。报错信息中提供了三种可能的原因，针对这三个可能原因逐一检查。极有可能是因为第三条导致了问题，继续查阅文档，官网。包也可以解决，原理都一样，两者存在一个版本的。组件库时，为避免每次修改都发布到。为组件库建立软连接，方便本地调试。的，支持 React Hook。检查项目中是否存在多个不同版本的。版本即可，如果还未解决，再将。，需要在本地的测试项目中使用。，但是依赖的第三方库使用了。版本中引入的，先检查。，并且使用方式是正确的；
Form.useForm()报错:Error: Invalid hook call. Hooks can only be called inside of the body
Weston_J的博客
06-24 7150
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 的实现，只
【React】Invalid hook call. Hooks can only be called inside of the body of a function component.
zqq_2016的博客
10-22 1497
具体报错信息： 解决办法： cnpm install --save react@^16.12.0 react-dom@^16.12.0 最好在执行完以上命令后，重新执行一下npm start.
pro-antd 报错Error: Invalid hook call. Hooks can only be called inside of the body of a function compo
cxz
08-26 413
发现@types/react版本使用有问题。使用了pro antd，一直。检查了react版本。
Invalid hook call. Hooks can only be called inside of the body of a function component
xt_XiTu的博客
08-11 1017
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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿，葱来了-C is coming

老板大气

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值