关于react.hook的Invalid hook call Hooks can only be called inside of the body of a function component问题

最新推荐文章于 2024-05-18 00:11:13 发布
最新推荐文章于 2024-05-18 00:11:13 发布
阅读量1.5w 收藏 1
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31444707/article/details/106687385
版权

错误：
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 

原因：

   这个也在网上找了许多解释的方法，有以下几点：

  （1）react-redux版本太高，降低版本就可以，但是对我这个好像不奏效

  （2）书写react.hook代码规范有问题，先确保你写的react.hook的代码是没有问题的，可以先阅读一边react.hook规范仔细检查一次，如果没错继续往下看

 （3）react.dom版本太高因为我执行一了遍npm i 把我的react.dom更新到了最新16.13.1，更新完成之后我得项目就直接报错了，起都起不来，网上找了一大堆也不管用，最后想到可能是版本太高的问题就npm install --save react@^16.12.0 react-dom@^16.12.0试了一下降低了react.dom的版本，最后又重新编写了一下就成功运行了

在此纪念下

 

IT大天使
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
react-hook-sticky:粘钩React
05-12
React钩发粘 粘性组件的高性能轻量级解决方案。 开始合作并分享您的粘性插件。 :warning: Beta版-即将创建稳定版本。 提供您的想法，随时为您贡献力量。 演示版 路线图 您想贡献吗？ 这里有一些不错的想法： ...
react-modal-hook:使用React Hooks来处理模态的语法糖
05-02
使用React Hooks处理模态窗口的语法糖。 该库不提供任何UI，但是提供了一种方便的方法来呈现在其他地方定义的模式组件。 对于简单的模态组件，请查看 ，它与该库配合使用。 目录 安装 npm install --save react-...
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...
Invalid hook call. Hooks can only be called inside of the body of a function component
xt_XiTu的博客
08-11 834
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
react报错之Invalid hook call
最新发布
weixin_61876780的博客
05-18 241
解决方法：只使用一个版本的react进行代码的编译，比如项目中同时使用了react-router-v5和react-router-v6的两种代码写法，首先在package.json文件中找到我们安装的react-router版本信息，如何再将我们的代码统一写成已安装的版本的格式。大部分时候，都是因为使用了多个版本的react导致的报错，我们可以使用npm list react来检查我们的项目中是否包含了多个版本的react。
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 ...
react出现了Invalid hook call. Hooks can only be called inside of the body of a function component.
weixin_38441229的博客
08-07 2090
/ Hook 只能在函数组件的最顶层使用 function Example() { if (someCondition) { const [count, setCount] = useState(0);在普通的 JavaScript 函数中使用 Hook 在 class 组件中使用 Hook 在自定义 Hook 内部再调用 Hook 在条件判断或循环中使用 Hook。这是因为你在函数组件以外使用了 React Hook。根据 React Hook 规则,Hook 只能在函数组件的最顶层作用域中调用。
use-global-hook:使用Hooks和Context API进行React的无痛全局状态管理，大小为1KB！
05-06
使用全局挂钩使用Hooks和Context API进行React的无痛全局状态管理，大小为1KB！安装npm install @devhammed/use-global-hook快速范例import React from 'react'import ReactDOM from 'react-dom'import { ...
react-hook-layout:React中的布局管理
05-01
React挂钩布局 该钩子是Layout组件模式的一种变体，已在网站上进行了描述，并在React文档中作为部分的一部分进行了提及。 它在页面和布局组件之间添加了一层抽象，并允许开发页面而无需事先创建布局组件。 在运行时...
use-custom-hook:A用于创建新的React Hook的入门模板
05-13
:toolbox: useCustomHook：React Hook启动器 用于创建新的React Hook的入门模板。 :rocket: 入门tl; dr git clone https://github.com/colbyfayock/use-custom-hook [directory] cd [directory] yarn install && ...
react-redux 出现 Invalid hook call.Hooks can only be called inside of thebody of a function component
weixin_42331327的博客
01-09 2万+
import ReactDOM from "react-dom" import store from "./store" import {Provider} from "react-redux" import Todo from "./components/Todo" const APP = ( <Provider store={store}> <Todo /> &...
【React】Invalid hook call. Hooks can only be called inside of the body of a function component.
zqq_2016的博客
10-22 1404
具体报错信息： 解决办法： cnpm install --save react@^16.12.0 react-dom@^16.12.0 最好在执行完以上命令后，重新执行一下npm start.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.
Danica的博客
06-22 1796
在react创建项目或者安装路由已经依赖的时候出现，一般情况下是npm安装出现的版本问题，npm很容易出现包的冲突问题。改为yarn安装或者更改为正确的版本。
Form.useForm()报错:Error: Invalid hook call. Hooks can only be called inside of the body
Weston_J的博客
06-24 6830
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 的实现，只
npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...
卡尔特斯
09-06 1472
包即可，但是这种方式不推荐，毕竟删了打包组件库时就报错了，还得重新。报错信息中提供了三种可能的原因，针对这三个可能原因逐一检查。极有可能是因为第三条导致了问题，继续查阅文档，官网。包也可以解决，原理都一样，两者存在一个版本的。组件库时，为避免每次修改都发布到。为组件库建立软连接，方便本地调试。的，支持 React Hook。检查项目中是否存在多个不同版本的。版本即可，如果还未解决，再将。，需要在本地的测试项目中使用。，但是依赖的第三方库使用了。版本中引入的，先检查。，并且使用方式是正确的；
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 Hooks Error: Hooks can only be called inside the body of a function component
夜近天溟的博客
11-06 3334
通过npm link调试React Hook的组件的坑。 npm有个npm link 命令，可以让我们不需要每次都发布npm包就可以进行本地调试，但是当我们引用的本地npm包里有使用React Hook的组件，那么基本就会出现多个react副本的报错； 解决方法不好找，但也很简单，就是在父级项目的（注意，不是被link的npm包）webpack.config.js里添加下面的别名： resolve: { alias: { 'react': path.resolve

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值