解决React报错Invalid hook call

 更新时间:2022年12月02日 09:31:48   作者:Borislav Hadzhiev  
这篇文章主要为大家介绍了React报错Invalid hook call解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

总览

导致"Invalid hook call. Hooks can only be called inside the body of a function component"错误的有多种原因:

  • reactreact-dom的版本不匹配。
  • 在一个项目中有多个react包版本。
  • 试图将一个组件作为一个函数来调用,例如,App()而不是<App />
  • 在类里面使用钩子,或者在不是组件或自定义钩子的函数中使用钩子。

版本匹配

在项目的根目录下打开终端,更新reactreact-dom包的版本,确保版本是相匹配的,并且没有使用过时的版本。

# 👇️ with NPM
npm install react@latest react-dom@latest
# 👇️ ONLY If you use TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest
# ----------------------------------------------
# 👇️ with YARN
yarn add react@latest react-dom@latest
# 👇️ ONLY If you use TypeScript
yarn add @types/react@latest @types/react-dom@latest --dev

如果错误仍存在,尝试删除node_modules以及package-lock.json(不是package.json)文件,重新运行npm install 并重启你的IDE。

这个错误通常是由于在同一个项目中拥有多个版本的react造成的。

# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
# 👇️ clean npm cache
npm cache clean --force
npm install

如果错误仍然存在,请确保重启了IDE和开发服务。VSCode经常出现故障,需要重启。

调用组件

这里有另一个示例,用来展示错误是如何发生的。

// App.js
import {useState} from 'react';
// 👇️ Don't call components as functions 👇️
App();
export default function App() {
  /**
   * ⛔️ 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
   */
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
}

问题在于,我们将App组件作为函数进行调用。

你应该只使用具有JSX语法的组件。比如:<App country="Austria" age="30" />,而不是App({country: 'Austria', age: 30})

确保你没有在一个类组件,或一个既不是组件也不是自定义钩子的函数里面调用钩子。

如果你有一个类,请将其转换为能够使用钩子的函数。

下面是一个例子,说明在一个既不是组件也不是自定义钩子的函数中是如何引起错误的。

// App.js
import {useState, useEffect} from 'react';
// 👇️ not a component nor custom hook
// so it can't use hooks
function counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('hello world');
  }, []);
}

counter函数以小写的c开头,所以它不被React认为是一个组件。因为所有的组件名称必须以大写字母开头。它同样也不是自定义钩子,因为其名称没有以use开头,比如说useCounter

我们只能在函数组件或自定义钩子里面使用钩子,所以能够使用钩子的一个方法是将counter重命名为useCounter

import {useState, useEffect} from 'react';
function useCounter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('hello world');
  }, []);
}

现在React认为useCounter是一个自定义钩子,并允许我们在里面使用钩子。

就像文档中所说的那样:

  • 只从React函数组件或自定义钩子中调用Hook
  • 只在最顶层使用 Hook
  • 不要在循环,条件或嵌套函数中调用 Hook
  • 确保总是在你的 React 函数的最顶层以及任何 return 之前使用 Hook

翻译原文链接:bobbyhadz.com/blog/react-…

以上就是解决React报错Invalid hook call的详细内容,更多关于React报错Invalid hook call的资料请关注脚本之家其它相关文章!

相关文章

  • 使用React-Window实现虚拟滚动效果的示例代码

    使用React-Window实现虚拟滚动效果的示例代码

    React-Window 是一个为 React 应用程序中高效渲染大数据集而设计的库,它基于窗口化或虚拟化的原则运行,本文将使用React-Window实现虚拟滚动效果,感兴趣的可以了解下
    2024-01-01
  • React中jquery引用的实现方法

    React中jquery引用的实现方法

    这篇文章主要介绍了React中jquery引用的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • react性能优化useMemo与useCallback使用对比详解

    react性能优化useMemo与useCallback使用对比详解

    这篇文章主要为大家介绍了react性能优化useMemo与useCallback使用对比详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • React实现动态调用的弹框组件

    React实现动态调用的弹框组件

    这篇文章主要为大家详细介绍了React实现动态调用的弹框组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • React实现双向绑定示例代码

    React实现双向绑定示例代码

    这篇文章给大家介绍了在React中如何实现双向绑定,文中给出了示例代码,对大家的理解与学习很有帮助,有需要的朋友下面来一起看看吧。
    2016-09-09
  • 深入探讨前端框架react

    深入探讨前端框架react

    本文带领大家一起探讨前端框架react,涉及到前端框架react相关知识,对前端框架react相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 详解React项目如何修改打包地址(编译输出文件地址)

    详解React项目如何修改打包地址(编译输出文件地址)

    这篇文章主要介绍了详解React项目如何修改打包地址(编译输出文件地址),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 列表页常见hook封装实例

    列表页常见hook封装实例

    这篇文章主要为大家介绍了列表页常见的hook封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Hello React的组件化方式之React入门小案例演示

    Hello React的组件化方式之React入门小案例演示

    这篇文章主要介绍了Hello React的组件化方式-React入门小案例,本文通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法,需要的朋友可以参考下
    2022-10-10
  • 在react配置使用less的完美方案

    在react配置使用less的完美方案

    由于 create-react-app 使用 webpack 作为其模块打包器,你需要修改 webpack 的配置来支持 .less 文件,这篇文章主要介绍了在react配置使用less的完美方案,需要的朋友可以参考下
    2024-04-04

最新评论