function Notification({ flashMessage }) {
useEffect(() => {
if (isEmpty(flashMessage)) {
return null;
}
const dispatch = useDispatch();
dispatch(uiActions.dispatchNotification(flashMessage));
}, [flashMessage]);
....
return <div>....</div>
};
react-dom.dev
浏览 1提问于2020-09-23得票数 0
回答已采纳
2回答
摘要
。
我尝试的是:我有一个布局页面，其中包含一个侧边栏，页脚，。以及内容页面(例如：/pages/home)
我正在寻找一种方法，在这个常规的/pages/home.js中使用一个反应上下文
相关信息
我已经建立了一个背景：
import React, { useState, createContext } from "react"
const ShareContext = createContext()
const ShareContextProvider = props => {
const [collapsedShare, setCollapsedShar
浏览 2提问于2020-07-04得票数 3
我正在使用React 16，并尝试使用React钩子来访问上下文。
const { locale } = React.useContext(LocaleContext);
这个钩子调用是在Redux中间件中完成的。然后我得到了错误Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.
有没有办法让我从功能组件外部访问上下文？
浏览 11提问于2020-05-25得票数 0
我是一个新手，正在尝试解决这个错误。基本上，我正在创建一个基于axios的HttpAuthClient，并且想要添加访问令牌到我试图点击按钮的每个request.When，我得到了一个错误-“未处理的拒绝(错误)：无效的钩子调用。钩子只能在函数组件的主体内调用”。 组件 import React, { useState } from 'react';
import { HttpAuthClient } from "../HttpAuthClient/HttpAuthClient";
export const Content = () => {
浏览 179提问于2020-08-18得票数 2
这是我的密码：
<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
回答已采纳
1回答
我刚开始反应，我试图构造我的代码。我正在构建一个博客主页，所以我从标题开始，它运行得很好；我所做的只是用index.js编写代码。
在此之后，我试图重新构造代码，将其拆分到不同的文件、类和函数中，我得到了一个关于“无效钩子调用”的错误。
我的意图是构建一个结构良好的应用程序，所以我决定将组件逻辑与他的功能和风格分开。
我编写了一个扩展React.Component的头类；将处理组件的逻辑。
然后，我编写了一个简单的函数，它将由类的render()方法调用，并返回组件结构。
最后，我创建了一个包含组件样式的文件；它只包含并导出定义该样式的“const”。
这是我的问题；当我试图调用函数makeS
浏览 4提问于2019-11-11得票数 1
回答已采纳
1回答
它显示钩子错误，但问题是我没有任何hooks.Only材料UI造成这个问题。如果我在返回后删除这些字符串，它就会正常工作。
项目代码：
import React from 'react'
import { Container, AppBar, Typography, Grow, Grid } from '@mui/material'
import memories from './images/memories.png'
const App = () => {
return (
浏览 5提问于2022-02-07得票数 -1
有没有人能帮我做些反应钩的基础知识，我相对来说是个新手，在网上找不到合适的帮助。
import React from 'react'
import { auth, provider } from "../../../firebaseSetup";
import { useNavigate } from "react-router-dom"
const GoogleAuth = async() => {
const navigate = useNavigate()
auth.signInWithPopup(provider)
浏览 8提问于2022-02-22得票数 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
当我在我的应用程序中输入内容UI代码并在浏览器上启动我的react应用程序时。我的应用程序警告：
22. Stack frames were collpsed.
-------------------------------
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
浏览 2提问于2021-12-11得票数 -1
回答已采纳
我在我的react.js应用程序中有一段代码：
import { withAlert} from "react-alert";
class Signup extends React.Component {
state={email:'',passwordHash:'',rePasswordHash:''};
onButtonClick = () =>{
if(this.state.passwordHash!==this.state.rePasswordHash){
this.props.alert.
浏览 11提问于2019-09-18得票数 0
回答已采纳
我们有没有办法在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
回答已采纳
我有这样一个中间件
import type { NextFetchEvent, NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { useCheckIsAdminQuery } from "../../generated/graphql";
export function middleware(req: NextRequest, ev: NextFetchEvent) {
const {data,loadi
浏览 32提问于2022-04-07得票数 0
回答已采纳
当试图在使用"rfc"-snippet生成的函数组件中初始化Date对象时，component将抛出下面的错误。组件里没有钩子。除了代码片段之外，let dateObj = new Date()是惟一添加的内容。
我已经检查了我的React版本，并尝试重新启动服务器。我使用创建-反应-应用程序来创建我的反应项目。
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
import React from 'react
浏览 1提问于2022-03-25得票数 0
如何使用旧的react useContext ()函数进行渲染？
错误：
react-dom.development.js:57 Uncaught (in promise) 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 versions of React and
浏览 2提问于2020-06-06得票数 0
我正在使用redux/toolkit处理简单的reactjs登录表单。成功登录后，我想重定向到dashboard页面。它正在抛出跟随错误。我是新手，如果我错过了什么，请告诉我。
错误：
Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
authSlice.js
import { useNavigate } from 'react-router-dom';
export const submit
浏览 5提问于2022-04-20得票数 3
回答已采纳
1回答
当我在表中键入和搜索某些内容时，我试图使用debounce函数来避免多次调用。我就是这么做的-
onChange={(_event, searchText) => React.useCallback(debounce(void setSearchText(searchText), _searchDebounceWaitTime), [])}
它给出了一个错误，说明Uncaught TypeError: Expected a function我做错了什么？我在网上找到的大多数解决方案都做了类似的事情。
注意:我也试着做-
onChange={(_event, searchText) =&g
浏览 26提问于2022-04-21得票数 0
回答已采纳
我正在尝试使用下面的自定义钩子，但它不能像预期的那样工作 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
2回答
我试图在React中的一个函数中使用useParams()钩子，但是它给出了以下错误
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 b
浏览 2提问于2022-01-23得票数 1
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
回答已采纳
我正在用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
我在试着得到一个正常运作的反应表。我已经把我的项目简化到了基本的调试过程，我不明白为什么这是一个无效的钩子，有什么方法可以让我更好地了解什么是错误，还是我没有正确地读取错误？
在和下运行时出现的错误--和底部的所有代码
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
回答已采纳
我正在尝试更新输入更改的上下文状态。我想为此有一个可重用的函数。
我的职能：
import { useContext } from "react";
import NewUserState from "../context/NewUserState";
const updateUserState = (e) => {
const [setNewUserState] = useContext(NewUserState);
setNewUserState((current) => {
const updateUser = { ...cu
浏览 8提问于2022-11-23得票数 0
2回答
我正在尝试更新组件的状态，但由于某种原因，它一直显示为Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
我正在尝试有一个模式，可以打开一次点击一个<div>。在该模式中有一个文本输入，它将更新状态(备注)。出于某种原因，它说钩子调用无效--为什么呢？
const openTestModal = () => {
let [notes, setNotes] = useState("");
let [
浏览 2提问于2020-02-01得票数 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
回答已采纳
当用户单击从api获取按钮数据并使用getdata组件的列表代码显示时，我希望创建一个带有按钮的导航条。
import {useState,useEffect} from 'react'
export function GetData()
{
const [posts , setPosts] = useState([]);
useEffect(()=>{
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => respo
浏览 5提问于2022-09-17得票数 0
由于某种原因，当我在App()函数中调用BrowserRouter时，无法呈现整个应用程序。如果我注释掉这些行，应用程序就能工作了。我是个全新的反应者。我做错什么了吗？
index.js
import ReactDOM from 'react-dom';
import App from './App'
ReactDOM.render(
<App/>,
document.getElementById('root')
);
App.js
import React from 'react'
import { Bro
浏览 5提问于2022-02-28得票数 0
1回答
我是个新手，我得到了以下错误：
react-dom.development.js:14906 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
浏览 1提问于2021-04-29得票数 0
1回答
我在尝试创建一个模式时出现错误。我尝试制作一个在单击按钮时出现的模式。这是一个在modal中弹出的表单，提交后modal将关闭。表单是一个常规组件，直到我更改了流程，所以我更改了组件，使其成为一个模式。在这样做之后，我得到了这个错误。
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
而且我的状态也不再起作用
Line 7:4: 'state' is not defined no-undef
提一下我还是个新手可能会更好。
这是我制
浏览 7提问于2020-05-14得票数 0
回答已采纳
1回答
我正在尝试导出一个从状态更新的变量。我面临的挑战是，我不能修改变量是如何导出的，因为目前使用它的文件太多了。
也许可以从另一个文件调用函数来执行？
import { useAppDispatch, useAppSelector } from "../redux/hooks";
export const Content = () => {
const { store } = useAppSelector((state) => state.StoreReducer);
return store;
};
export const currency =
浏览 4提问于2022-02-03得票数 2
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
我从here复制粘贴了演示，但它似乎不能在我的应用程序中工作。不确定与我的代码和网站上的代码有什么不同。我得到以下错误： react-dom.development.js:14724 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:
VM15341 makeStyles.js:170 Uncaught TypeError: Can
浏览 16提问于2021-01-04得票数 0
1回答
我反复安装了资料-ui和资料-ui图标，但每当我尝试使用资料-ui图标，它会给我一个空白的屏幕，以及许多错误。
Header.js
import React from 'react'
import "./Header.css"
import PersonIcon from '@mui/icons-material/Person';
function Header() {
return (
<div className="header">
<h1 className
浏览 1提问于2021-12-25得票数 1
我正尝试在我的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
我有一个简单的service.js，如下所示：
import axios from 'axios'
import { useContext } from 'react'
import APIContext from '../context/api/context'
function GetApi() {
const { API } = useContext(APIContext)
console.log(API)
return API
}
const api = axios.create({
baseURL: `${GetAp
浏览 16提问于2022-06-27得票数 1
回答已采纳
我曾尝试将一个函数分离到另一个文件，并在useEffect()中调用它。这是我的代码。 ReadCookie.js
import React, {useContext} from 'react'
import { AuthContext } from '../App';
import Cookies from 'js-cookie';
import { useHistory } from 'react-router-dom';
export const ReadCookie = () => {
const {s
浏览 34提问于2020-09-07得票数 0
我正在学习React，在一个应用程序中，我试图改变描述和数量，并添加一个注释，但是每次我尝试，我都会得到一个错误：
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
浏览 11提问于2022-02-05得票数 0
1回答
我想把一个钩子放在初始化变量的状态中： state = {
geo: new usePosition()
} 但我得到了以下错误： 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 D
浏览 19提问于2020-11-25得票数 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
下面的html & js有什么问题，我不能使用钩子！这是我的项目中唯一的文件(没有其他文件或包管理器) <html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd
浏览 8提问于2020-11-23得票数 1
回答已采纳
好吧，我有个错误
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
我尝试了很多不同的方法来解决这个问题，但我失败了。
这是我的密码
export const DataInput = () => {
const Post = (testTitle, testText) => {
useFirestore().collection('schedule-data').doc('test&#
浏览 5提问于2020-03-23得票数 0
回答已采纳
所以最近我开始将React漂亮的dnd集成到我的React项目中，我编写了一堆代码并得到了这个错误：
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
这是：
The above error occurred in the <DragDropContext> component:
at DragDropContext (http://127.0.0.1:3000/static/js/bundle.js:8960:19)
at
浏览 2提问于2022-08-28得票数 0
我正在使用react-i18next模块和useTranslation钩子转换。我可以在我的组件上使用它。但我想在redux操作中使用它。Error: Invalid hook call. Hooks can only be called inside of the body of a function component.。
import cogoToast from "cogo-toast";
import { useTranslation } from "react-i18next";
export const test = ({ key1, key2
浏览 2提问于2020-11-20得票数 0
我想在我的DApp中包含DApp( include )，但是我在控制台中得到了这个错误，因为其他组件也没有呈现这个错误：
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
浏览 0提问于2022-09-05得票数 1
当我在我的应用程序上使用钩子时，我得到了的错误:无效的钩子调用。我不知道为什么要得到这个错误，因为我认为它是在函数组件中调用的？
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回答
我想编写一个我将在不同功能组件中使用的通用函数。
这个通用函数使用钩子，我得到了错误：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
回答已采纳
所以，在我的下一个应用程序中，我使用的是react-google-one-tap-login库，它有useGoogleOneTapLogin钩子，必须在react组件内部调用。但当我称之为：
func() {
useGoogleOneTapLogin({})
return (some jsx)
}
我发现了一个错误ReferenceError: window is not defined。
然后，我将尝试使用if (process.browser)然后运行useGoogleOneTapLogin来修复它，但是我得到了一个错误：useGoogleOneTapLogin is called
浏览 16提问于2022-10-08得票数 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
不允许在高阶组件中使用钩子吗？当我尝试用这个简单的模式来做这件事时，我得到了错误Invalid hook call. Hooks can only be called inside of the body of a function component. // App.js
import React, { useState } from 'react';
const WithState = (Component) => {
const [state, dispatch] = useState(0);
return () => <Component
浏览 24提问于2019-04-16得票数 2
回答已采纳
我有一个有趣的情况。 我想使用Apollo本身发起刷新令牌请求(也称为突变) 有什么想法，如何实现这样的事情？ export default new ApolloClient({
link: ApolloLink.from([
onError(({ graphQLErrors, networkError, operation, forward }) => {
// useMutation(REFRESH_ACCESS_TOKEN)
}),
]),
new HttpLink({...}),
}) 基本上，我只是在创建新的ApolloClient实
浏览 30提问于2020-02-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
