为什么我收到'Invalid hook call‘错误？
"Invalid hook call"错误通常是由于在React函数组件中错误地使用了React Hook导致的。React Hook是React 16.8版本引入的一种特性，用于在函数组件中使用状态和其他React特性。
这个错误可能出现的原因有以下几种：
- 忘记在函数组件的顶层使用Hook：React Hook只能在函数组件的顶层使用，不能在条件语句、循环语句或嵌套函数中使用。确保在函数组件的最外层使用Hook。
- 在循环或条件语句中使用Hook：由于Hook的使用规则，不能在循环或条件语句中使用Hook。如果需要在循环中使用Hook，可以使用循环内部的函数组件来解决。
- 在自定义Hook之外的地方使用Hook：自定义Hook是一种将Hook逻辑封装为可重用函数的方式。如果在自定义Hook之外的地方使用了Hook，会导致"Invalid hook call"错误。确保只在自定义Hook或React函数组件中使用Hook。
- 在类组件中使用Hook：Hook只能在函数组件中使用，不能在类组件中使用。如果需要在类组件中使用类似的功能，可以使用React的其他特性，如状态(state)或生命周期方法。
解决这个错误的方法是：
- 确保在函数组件的顶层使用Hook，并避免在循环或条件语句中使用Hook。
- 检查是否在自定义Hook之外的地方使用了Hook，如果有，将其移动到自定义Hook或React函数组件中。
- 如果需要在类组件中使用类似的功能，使用React的其他特性来实现，如状态(state)或生命周期方法。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供可扩展的计算能力，满足不同规模业务的需求。产品介绍链接
- 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。产品介绍链接
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。产品介绍链接
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联网设备。产品介绍链接
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。
相关·内容
当我在我的应用程序上使用钩子时，我得到了的错误:无效的钩子调用。我不知道为什么要得到这个错误，因为我认为它是在函数组件中调用的？
Server Error
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 R
浏览 3提问于2021-01-17得票数 2
回答已采纳
1回答
我在组件库旁边有一个Gatsby站点。在运行Gatsby站点时，我收到了一个“无效的钩子调用”错误，并且添加了一个类似于建议的here的Webpack别名解决了这个问题。 现在，在使用Jest和react-testing-library运行测试时，我得到了一个类似的“无效钩子调用”错误 Error: 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
浏览 5提问于2020-08-23得票数 3
2回答
当我尝试在模块中使用React Hooks时，我将其用作依赖项，但失败了。我收到以下错误：
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:
但是如果我使用基于类的组件，这是可以的。为什么会发生这种情况呢？
下面是我的package.json的摘录
{
"main": "dist/index.js",
"scripts&
浏览 0提问于2019-10-11得票数 4
我有一个组件，它使用另一个组件作为呈现器。但是，React不允许我在呈现器组件中使用钩子，因为它会引发以下错误：
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
下面是显示组件中的一个示例，它是一个错误边界
class DisplayComponent extends Component {
// ...
render() {
const { rendererComponent } = this.props;
return re
浏览 1提问于2021-12-15得票数 1
回答已采纳
我正在使用react-toastify，但是它抛出了一个关于"Invalid Hook Call“的错误。下面是我的代码： ? 下面是我的错误： ? 有人能帮我吗？
浏览 29提问于2021-11-20得票数 0
这是我的密码：
<div onClick={(e) => handleClick()}>Join Us</div>
这是手淫：
const handleClick = () => {
console.log(Lang.getLocale())
};
这是我的职责：
class Lang {
static getLocale() {
const { locale } = useRouter();
return locale?.toString()
}
}
export default Lang
但我知道
浏览 7提问于2022-01-13得票数 0
回答已采纳
我正在用nextjs构建一些网页，我需要确保只有在用户通过身份验证的情况下才能访问某些页面，如下所示： import UserManager from "../managers/user_manager";
import { useRouter } from "next/router";
import LogInPage from "../pages/auth/login";
export default function EnsureAuthenticated(OriginalComponent) {
const router =
浏览 14提问于2021-07-02得票数 0
我不知道为什么在运行测试之后会收到这个错误。
Invalid hook call. Hooks can only be called inside of the body of a function component.
我的代码就是这样的
23 |
24 | const LandingPageNew = () => {
> 25 | const [displayElement, setDisplayedElement] = useState(1);
| ^
2
浏览 2提问于2021-03-20得票数 1
我正在尝试使用next-auth保护API端点，但该端点返回错误“Invalid hook call”
以下是来自API端点的完整代码：
import Sale from '../../../../models/Sale';
import dbConnect from '../../../../utils/dbConnect';
import { useSession, getSession } from 'next-auth/client'
export default async function handler({query: {
浏览 4提问于2021-05-20得票数 0
回答已采纳
在新机器上安装Emacs和Emacs the (ESS)后，当我打开R缓冲区时会收到以下错误：ess-toggle-S-assign wrong number of arguments。我相信这是因为我的.emacs文件中的下面一节，我将分配键从_重新分配到;，如下所示。为什么我的.emacs文件不再工作了？
;; ESS hook additions. Note that the duplicate calls to `(ess-toggle-S-assign
;; nil)` are correct: the first call clears the default `ess-smar
浏览 1提问于2018-06-20得票数 0
回答已采纳
我正在使用create-react-library来构建我的组件库，并且我尝试使用样式化的组件，但是我一直收到一个React钩子错误。 下面是我的代码：https://github.com/emmabostian/component-library 下面是错误： 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 mi
浏览 41提问于2020-01-23得票数 5
我正尝试在我的NextJS站点中使用这个包：https://www.npmjs.com/package/@reonomy/react-confetti-explosion 这是它的基础知识。 class SelectedBet extends React.Component {
//Some stuff
render() {
return (
{this.props.bet && (
<SubmitBet
bet={this.props.bet}
/>
)}
浏览 23提问于2021-11-08得票数 1
我正试图使用“useNavigate”导航到另一个网页。我收到下面的错误信息，我不太明白我做错了什么。有人能告诉我吗？
import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography'
浏览 3提问于2022-01-27得票数 1
回答已采纳
3回答
我试图在我的代码中使用react-select，但我一直收到这个错误： 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: 我该怎么办？下面是react select https://react-select.com/home#animated-components的链接 import Select from 'react-select'
浏览 47提问于2021-07-11得票数 1
请帮助我解决这个错误后，安装我的WordPress在一个活动的服务器和本地的一个给我这个错误和警告，我无法在本地服务器上的网站。我用拉拉贡做本地服务器。请协助。我收到的错误消息如下。
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function '_add_default_theme_supports' not found or invalid function name in C:\laragon\www\rsbenterprise\wp-includes\class-
浏览 15提问于2022-01-31得票数 2
1回答
我正在尝试实现graphql。我已经将graphql查询放在一个函数FetchProducts()中，因为我想反复调用这个函数。该功能如下所示：
const Products = () => {
let productsFilters;
let products;
const { category } = useParams();
productsFilters = new ProductsFilters();
productsFilters.setSpecificCategory(category);
useEffect(() => {
Fe
浏览 5提问于2022-01-16得票数 0
我得到了以下php错误：
PHP Warning: call_user_func_array() expects parameter 1 to be a valid callback, function '' not found or invalid function name in /home/example/public_html/wp-includes/class-wp-hook.php on line 286
问题是没有提到函数名，我如何识别哪个函数导致了这个错误？
浏览 0提问于2019-11-20得票数 1
回答已采纳
我收到错误消息Invalid hook call。钩子只能在函数组件的主体内调用。我需要理解为什么我不能在项目中使用React Hooks。这是我的package.json文件。 "@types/react": "16.8.6",
"@types/react-dom": "16.8.2",
"react": "16.8.4",
"react-dom": "16.8.3" 以下是错误的快照。 ? 以下是此项目中使用的示例组件。 import React,
浏览 67提问于2020-01-21得票数 0
回答已采纳
我在试着得到一个正常运作的反应表。我已经把我的项目简化到了基本的调试过程，我不明白为什么这是一个无效的钩子，有什么方法可以让我更好地了解什么是错误，还是我没有正确地读取错误？
在和下运行时出现的错误--和底部的所有代码
react.development.js:209 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 hav
浏览 10提问于2022-08-29得票数 0
回答已采纳
2回答
我有一个按钮，它应该向API提交一个表单。我收到了一个错误：
Error: Invalid hook call. Hooks can only be called inside of the body of a function...
我的全部代码都在这里：
function SubmitButton(props) {
function SendData(url) {
const [data, setData] = useState([]);
const eta = document.getElementById('eta_value')
async
浏览 1提问于2020-01-20得票数 0
回答已采纳
这是我的代码，它给出了Invalid Hook Call错误，但我无法确定我到底做错了什么。如何在不调用函数内的钩子的情况下实现在此代码中所做的事情？
const useTimer = ({ days =0 , hours = 0 , minutes = 0 , seconds = 10 , millis = 0 } :{days?:number , hours? : number , minutes ?:number , seconds? : number , millis? : number} )=>{
const [time, setTime] = useState({
浏览 20提问于2019-11-11得票数 1
2回答
说到反应，我是新来的。我一直在尝试实现SimpleBottomNavigation组件，但是我收到了一个错误信息
"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 DO
浏览 8提问于2022-03-26得票数 0
回答已采纳
1回答
我有一个Frontity项目(React)，是我从Github那里撤回的。
当我从windows终端(powershell)中的命令npx frontity dev开始时，它启动了服务器，一切都如愿以偿。但是，当我在VSC终端(powershell和终端)中尝试相同的过程时，我会得到以下错误：
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
浏览 3提问于2022-02-26得票数 0
回答已采纳
4回答
如何解决此编译器错误
、、、
我尝试了一些FreeBSD内核黑客，在一个简单的钩子示例中遇到了一个错误。代码如下
*注意-我添加了#include <sys/stat.h>，正如许多人所建议的，但仍然会出现同样的错误。
#include <sys/types.h>
#include <sys/param.h>
#include <sys/proc.h>
#include <sys/module.h>
#include <sys/sysent.h>
#include <sys/kernel.h>
#include <sys/systm.
浏览 6提问于2014-04-25得票数 1
回答已采纳
(defun foo (aa)
(interactive)
(progn
(setq aa '(+ aa 1))
))
(defun bar ()
(interactive)
(setq b 6)
(add-hook 'post-self-insert-hook (foo b)))
elisp不是递增b，而是抛出一个错误：Invalid function: 7。它确实将b作为参数，但只有当它等于6时，它才会在递增后停止工作。为什么？问题出现在b等于任何数字时，它总是像Invalid function:b+1一样打印消息。
浏览 0提问于2019-06-07得票数 0
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'greenday_head' not found or invalid function name in /home/xnvrtebr/public_html/Blog/wp-includes/class-wp-hook.php on line 286
我有一个错误有一段时间，但没有注意到它，因为它隐藏在一个黑色的背景。
我已经查找了类wp-hook.php的代码，下面是第286行：
$value = cal
浏览 0提问于2018-01-22得票数 1
我正在使用Firebase Cloud Functions托管我的SSR Nextjs应用程序。我可以在firebase云函数上部署Nextjs应用程序，并在没有React Hooks的情况下通过干净的URL访问它，但使用React Hooks时，我会收到一条错误消息：
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.
浏览 0提问于2019-10-19得票数 9
1回答
我想编写一个我将在不同功能组件中使用的通用函数。
这个通用函数使用钩子，我得到了错误：Error: Invalid hook call. Hooks can only be called inside the body of a functional component.
我的代码示例：
App.js
import React from 'react';
import {
Text,
TouchableOpacity,
} from 'react-native';
import { Change } from 'static/Change
浏览 4提问于2022-03-15得票数 0
回答已采纳
Unhandled Rejection (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
浏览 371提问于2021-09-12得票数 0
我克隆了一个gatsby应用程序，并在运行开发服务器时：
$ gatsby develop
我收到一个错误：
以上错误发生在应用程序中的组件中: StoreStateProvider中
React will try to recreate this component tree from scratch using the error boundary you provided, App.
ERROR
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that metho
浏览 1提问于2020-05-06得票数 8
当使用钩子单击表单提交按钮时，如何调用API，然后将其JSON结果存储到某个状态？
在下面的代码中，我使用了一个form。当用户单击submit按钮时，将根据他们提供的参数调用API，但当我尝试以某种状态存储它时，我得到以下错误
import {useForm} from "react-hook-form";
import {useState, useEffect} from "react";
function Example() {
const {register, handleSubmit} = useForm();
const [sto
浏览 3提问于2021-10-17得票数 1
1回答
当还没有定义的模板为member_home_page.php时，我成功地设置了新页面的默认页面模板。
这非常适合我的本地环境，但是当我在WP引擎上将代码上传到我的站点时，我在WordPress的管理页面编辑屏幕的顶部得到了这个错误。
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'set_default_page_template' not found or invalid function name in /nas/content/staging/pmb
浏览 0提问于2018-07-26得票数 1
我一直在关注这个Mobx教程：
Code： 教程
代码在我的2台机器中的1台上工作得很好。在另一台机器上，运行"npm“时会收到一条错误消息：
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.
Uncaught TypeError: Cannot read properties of null (reading 'useState')
at Object.useState (react.developm
浏览 9提问于2022-08-17得票数 0
回答已采纳
1回答
我正在研究一个有一些依赖关系的应用程序。我想在本地对一个依赖项进行一些更改。 我尝试在主应用程序的node_modules中建立一个符号链接，直接指向依赖文件夹，其中包含使用此命令ln -s dependency_folder main_app/node_modules/dependecy编译的代码(es和lib)的文件夹。 它不工作并引发一个错误： Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one o
浏览 26提问于2021-08-23得票数 0
在我打开wordpress调试模式后，我注意到有一些问题：
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function '' not found or invalid function name in /home/kafijass/public_html/wp-includes/class-wp-hook.php on line 294
Warning: array_unique() expects parameter 1 to be array, null give
浏览 6提问于2021-07-03得票数 0
我知道在新版本中对react路由器库做了一些更改，尽管我认为我正确地遵循了这些更改，但仍然收到以下错误 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
浏览 68提问于2021-04-28得票数 0
回答已采纳
请在此作出反应，以了解以下错误：
Invalid hook call. Hooks can only be called inside of the body of a function component.
我正试图为我的React应用程序构建一个AuthService，以便将所有与授权相关的代码(登录、登录、令牌过期等)集中到一个AuthService.js文件中。
我有一个相对简单的Login.js页面/组件，非常好用。
Login.js
import { useContext } from "react";
import { AppContext } from '
浏览 5提问于2022-08-06得票数 -1
回答已采纳
技术
React(17.0.2)React Native(0.66.4)TypeScript(4.4.4)Storybook @storybook/react-native(5.3.25)@storybook/react-native-server(5.3.23)
我面对的是什么
在我的故事书中，我面临着下面的反应钩子错误。
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the followin
浏览 4提问于2022-01-09得票数 2
当我介绍useQueryClient时，我正在经历以下错误？知道为什么会这样吗？
我正试图通过invalidateQueries获得一个queryKey onSuccess of useUpdateEmployee hook。
bundle.js:1427 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:
组件
import { use
浏览 6提问于2022-10-19得票数 1
1回答
我刚开始反应，我试图构造我的代码。我正在构建一个博客主页，所以我从标题开始，它运行得很好；我所做的只是用index.js编写代码。
在此之后，我试图重新构造代码，将其拆分到不同的文件、类和函数中，我得到了一个关于“无效钩子调用”的错误。
我的意图是构建一个结构良好的应用程序，所以我决定将组件逻辑与他的功能和风格分开。
我编写了一个扩展React.Component的头类；将处理组件的逻辑。
然后，我编写了一个简单的函数，它将由类的render()方法调用，并返回组件结构。
最后，我创建了一个包含组件样式的文件；它只包含并导出定义该样式的“const”。
这是我的问题；当我试图调用函数makeS
浏览 4提问于2019-11-11得票数 1
回答已采纳
我在测试屏幕上有问题。我试图用jest snapshot进行测试，但首先我不想通过RTK Query request API的简单测试。在下一个示例中，我尝试获得类似于Test didn't pass due to not equal results的错误，但我得到的是Invalid hook call，更多的将是示例代码。
ContactScreen-test.js
import 'isomorphic-fetch';
import { useGetUserDataQuery } from '../../services';
describe(
浏览 4提问于2022-03-21得票数 3
回答已采纳
我们有没有办法在getStaticProps().中使用自定义钩子？原因是，因为我们使用内容CMS从传递API中获取数据，而且我们更容易使用自定义钩子来获取某些数据。
现在，当我们调用(例如，useHomePageData中的getStaticProps()函数)时，当我们试图使用简单的对象析构来获取数据时会出现错误。
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 r
浏览 10提问于2022-02-09得票数 1
回答已采纳
4回答
responsive.js
import { useMediaQuery } from "react-responsive";
export default {
sm: useMediaQuery({ maxWidth: 768 }),
md: useMediaQuery({ minWidth: 769, maxWidth: 1024 }),
lg: useMediaQuery({ minWidth: 1025 }),
};
当我试图在App.js中导入它时
import {sm,md,lg} from "../../responsive"
错误发
浏览 2提问于2021-11-25得票数 1
回答已采纳
我在使用反应性路由器-dom V5，
在组件中，在呈现时，我必须显示一个按钮，该按钮将将我重定向到另一个组件布局：
我已经说过：
import React, { Component } from 'react';
import DashboardLayout from "../../views-layouts/DashboardLayout";
import { BrowserRouter , Switch ,Route , Link } from 'react-router-dom';
import { useHistory } from &#
浏览 2提问于2021-06-08得票数 0
回答已采纳
当尝试订阅时，我设置了过期时间，但收到了错误：
pushInvalidTtl: Invalid ttl value for channel -1477712661
我要打的电话是：
Google::Apis::DriveV3::Channel.new(
id: self.id,
address: "https://#{ENV['DOMAIN']}/api/google/webhook",
type: "web_hook",
resource_id: resource_id,
expiration: (Time.current
浏览 2提问于2016-11-20得票数 0
回答已采纳
我想知道react typescript是否很好，所以我尝试了一下。我遇到了我从未遇到过的问题。
以下是我的代码
function Map() {
const [viewport, setViewport] = useState({
width: 400,
height: 400,
latitude: 37.7577,
longitude: -122.4376,
zoom: 8
});
return (
<ReactMapGL
{...viewport}
mapboxApiAccessToken=&
浏览 2提问于2021-11-15得票数 1
我正在尝试使用下面的自定义钩子，但它不能像预期的那样工作 CustomHook： import { useEffect, useState } from 'react'
import { createAPIInstance } from '../utils/api'
import { getBaseUrl } from '../utils/functions'
const BASE_URL = getBaseUrl()
const useGetAPI = (endpoint) => {
const [data, setData]
浏览 3提问于2020-03-29得票数 0
一直在尝试Webpack的五模块联盟，并遇到了这个问题。尝试了许多方法，但似乎都没有奏效。基本上，当我试图在联邦模块上使用styled-components时，我会得到React的Invalid hook call错误。
下面是一个试图重现问题的存储库：
我想知道我是不是漏掉了什么，或者这是不是某种错误。
浏览 0提问于2020-10-05得票数 5
回答已采纳
对于一个客户，我在WordPress中建立了一个网站。网站被黑客入侵并被恶意代码感染，所以我重新上传了所有的WordPress文件和主题文件，更改了所有密码，安装了一个安全插件，并运行了几次病毒扫描来删除每一行可疑的代码。完成此操作后，站点正常工作，但现在我收到以下错误：
Warning: Cannot call assert() with string argument dynamically in /mnt/web107/d1/74/58360774/htdocs/wp-includes/cron.php on line 1 Warning: call_user_func_array()
浏览 33提问于2018-01-05得票数 0
回答已采纳
1回答
我还是对把头绕在钩子上有问题。我经常遇到问题，它抱怨我在做Invalid hook call。
这一次，它是在尝试使用来自阿波罗的useMutation钩子在一个自定义钩子。
如果有人能告诉我我做错了什么，我会很感激的。
组件(我在其中调用自定义钩子)
export default function MyComponent() {
const { loading, error, data } = useQuery( GET_ORDERS );
const setOrdersInMetafields = ( orders: Array<OrderModel> )
浏览 3提问于2022-02-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
