react-hooks踩坑：invalid hook call

最新推荐文章于 2024-07-18 11:44:24 发布
最新推荐文章于 2024-07-18 11:44:24 发布
阅读量1w 收藏 2
点赞数 6
分类专栏： 杂记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011393161/article/details/107807496
版权

最近在写一个react组件的时候，遇到了这个问题，因为这个组件是想作为npm包使用，然后在组件里面使用了useEffect，这个组件本身的package.json里安装了react和react-dom作为devDependencies，另外建了测试工程，测试工程里单独装了react和react-dom，用npm link的方式来测试这个组件，然后就遇到这个报错

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

第一个通过检查yarn.lock很好排除，第二个感觉自己也没有写什么判断循环什么的，所以就怀疑是第三个，找了半天，发现官方文档里写的明明白白的
在这里插入图片描述
甚至还提示了出现这种问题的场景，简直一模一样
在这里插入图片描述
我试了一下把测试工程的react和react-dom依赖去掉，放到组件的目录下，使用组件的react和react-dom，就不报错了

vzhufeng
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React V6 编程式路由导航 useNavigate()要用函数式组件否则Hook报错
weixin_45029697的博客
02-21 1万+
首先const navigate = useNavigate(); 则可以使用navigate这个函数代替this.history.push、this.history.replace、this.history.gofoward、this.history.goback、this.history.go 1.注意：navigete默认history的是push模式，使用replace模式需要添加 {replace:true} //开启replace模式 2.注意：使用useNavigate()必须是在函数
如何测自定义的 React Hooks？
MonsterException的博客
04-22 1200
组件和纯函数都好测，那 Hooks 呢？
npm link 引发的 Invalid hook call 问题
qq_38506368的博客
02-04 2111
项目场景： 5 问题描述： 原因分析： 官网给出过可能的原因，参见这里。 解决方案： 在使用
react报错之Invalid hook call
weixin_61876780的博客
05-18 498
解决方法：只使用一个版本的react进行代码的编译，比如项目中同时使用了react-router-v5和react-router-v6的两种代码写法，首先在package.json文件中找到我们安装的react-router版本信息，如何再将我们的代码统一写成已安装的版本的格式。大部分时候，都是因为使用了多个版本的react导致的报错，我们可以使用npm list react来检查我们的项目中是否包含了多个版本的react。
Reacr报错：Hooks can only be called inside the body of a function component.
最新发布
weixin_45705239的博客
07-18 323
比如你可能正在使用尚不支持 Hooks的版本react-dom(< 16.8.0) 或(< 0.59)。如果违反这些规则，可能会看到此错误。还有一种情况比较少见，
React中使用Ant Design组件库报错 invalid hook call && 组件无法正常显示
qq_45327886的博客
10-17 8730
一、使用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
遇到：React Invalid hook call 错误应该如何解决
牛肉胡辣汤
08-09 964
遇到 "React Invalid hook call" 错误是因为在使用 React 的函数组件中，使用了钩子（Hook）的规则没有被遵循。React 的钩子（Hook）只能在函数组件的顶层使用，不能在条件语句、循环语句或嵌套函数中使用。
npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...
卡尔特斯
09-06 1705
包即可，但是这种方式不推荐，毕竟删了打包组件库时就报错了，还得重新。报错信息中提供了三种可能的原因，针对这三个可能原因逐一检查。极有可能是因为第三条导致了问题，继续查阅文档，官网。包也可以解决，原理都一样，两者存在一个版本的。组件库时，为避免每次修改都发布到。为组件库建立软连接，方便本地调试。的，支持 React Hook。检查项目中是否存在多个不同版本的。版本即可，如果还未解决，再将。，需要在本地的测试项目中使用。，但是依赖的第三方库使用了。版本中引入的，先检查。，并且使用方式是正确的；
react-redux 出现 Invalid hook call报错问题
wzszq125的博客
10-16 944
import React from 'react'; //全局样式文件 import './assets/css/app.scss'; import 'antd/dist/antd.css' //路由系统 import { HashRouter } from 'react-router-dom' //状态管理 import { Provider } from 'react-redux' import store from '@/store' function App() { retur
react 报错 react.development.js:1476 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-10
这个错误通常发生在您在常规 JavaScript 函数或类组件中尝试使用 hooks 而不是函数组件时。解决此问题，请确保您使用的是函数组件，并且 React 和 React DOM 版本兼容。还可以检查是否遵循 Hooks 的规则，这包括在...
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 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
06-16
这是一个 React 报错信息，通常是因为在函数组件之外使用了 React Hooks。React Hooks 只能在函数组件内使用，而不能在 class 组件或者普通函数之外使用。 常见的原因有三个： 1. React 和渲染器（如 React DOM...
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-03
这个错误提示通常出现在使用Hooks时，Hooks被调用的位置不正确。Hooks只能在函数组件的顶层使用，不能在普通函数、循环和判断语句等中使用，同时也不能在类组件中使用。 出现这个错误的原因可能是以下几种情况： 1...
react出现了Invalid hook call. Hooks can only be called inside of the body of a function component.
weixin_38441229的博客
08-07 2200
/ Hook 只能在函数组件的最顶层使用 function Example() { if (someCondition) { const [count, setCount] = useState(0);在普通的 JavaScript 函数中使用 Hook 在 class 组件中使用 Hook 在自定义 Hook 内部再调用 Hook 在条件判断或循环中使用 Hook。这是因为你在函数组件以外使用了 React Hook。根据 React Hook 规则,Hook 只能在函数组件的最顶层作用域中调用。
React Invalid hook call
08-12 1521
先上一段异常错误信息 Invariant Violation: 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 misma...
React Invalid hook call
TZ2318387771的博客
03-13 1125
异常错误信息: Invariant Violation: 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 v...
关于react.hook的Invalid hook call Hooks can only be called inside of the body of a function component问题
qq_31444707的博客
06-11 1万+
错误： 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 th
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学习中的一些报错
weixin_43939440的博客
04-17 1404
touch : 无法将“touch”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请 确保路径正确，然后再试一次。 输入npm install touch-cli -g即可
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值