解决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 保留和重置State

    React 保留和重置State

    这篇文章主要为大家介绍了React 保留和重置State实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 详解React Native网络请求fetch简单封装

    详解React Native网络请求fetch简单封装

    本篇文章主要介绍了详解React Native网络请求fetch简单封装,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React组件的三种写法总结

    React组件的三种写法总结

    本文主要总结了React组件的三种写法以及最佳实践,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • React常见跨窗口通信方式实例详解

    React常见跨窗口通信方式实例详解

    这篇文章主要为大家介绍了React常见跨窗口通信方式实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • React Native 加载H5页面的实现方法

    React Native 加载H5页面的实现方法

    这篇文章主要介绍了React Native 加载H5页面的实现方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • React State状态与生命周期的实现方法

    React State状态与生命周期的实现方法

    这篇文章主要介绍了React State状态与生命周期的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • React过渡动画组件基础使用介绍

    React过渡动画组件基础使用介绍

    在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验。 当然,我们可以通过原生的CSS来实现这些过渡动画,这篇文章主要介绍了React过渡动画组件使用
    2022-09-09
  • React 时间切片理解分析

    React 时间切片理解分析

    这篇文章主要为大家介绍了React 时间切片理解分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 使用React-Window实现虚拟滚动效果的示例代码

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

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

    react-router-dom V6的配置使用实践

    本文主要介绍了react-router-dom V6的配置使用实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论