2回答
ReferenceError: window is not defined
当NextJS尝试呈现页面时，服务器端会出现此错误。但是您可以在useEffect钩子中使用window作为编写的。
我的问题是如何创建自定义钩子。我试着这样做：
export const useEventListener = (
target: EventTarget, event: string, listener: EventListenerOrEventListenerObject, trigger = true,
): void => {
useEffect(() => {
浏览 29提问于2021-03-01得票数 1
回答已采纳
我想知道在组件中使用useEffect钩子和自定义钩子有什么不同。 例如 如果我有一个功能组件( component )并在其中直接使用useEffect钩子 import React,{useEffect} from 'react';
function Component(){
useEffect(()=>{
//some code //callback fires after component renders
},)
return (<div>Component</div
浏览 21提问于2020-06-12得票数 3
回答已采纳
1回答
我有一个HoC，它接受组件的集合，并将它们包装在一个div中，这使得它们基本上是可滑动的。代码在浏览器中运行良好，但jest测试失败，并且智能感知显示使用useEffect的警告 import React,{useEffect} from "react";
export const swiper = (components) => {
const swiperHoc = props => {
useEffect(()=>{console.log('HocLogged')})
return <div>{comp
浏览 18提问于2020-02-02得票数 0
对于我们的应用程序(NextJS 11.0.0 + next-translate 1.0.7)，我们有一个简短的问题。该库包含一个函数，用于调用API (/lib/mylib.js)： export const getDataExample = async (lang) => {
return fetch(_apiurl_/example/{lang});
}; react (/components/myComponent.js)中的组件使用useEffect调用此函数： import { useEffect, useState } from 'react';
浏览 77提问于2021-07-07得票数 0
New in function，试图实现一个自定义钩子，当用户按下“输入”键时调用函数：
import { useEffect } from 'react'
const useEnterToCall = callBackFunction => {
const listenToCallWithEnter = e => {
e.code === 'Enter' && callBackFunction()
}
useEffect(() => {
document.addEventListener(
浏览 8提问于2021-06-21得票数 0
6回答
我已经创建了一个高阶组件，它应该为我的组件添加一些额外的功能。然而，当我在这个组件中使用react时，我会得到下面的eslint警告。
React "React.useEffect“不能在回调中调用。必须在React函数组件或自定义React函数中调用。(反应钩/钩规则)
我为什么要收到这个警告？在HoC中使用钩子被认为是不好的做法吗？
最起码的例子：
const Hello = props => <p>Greetings {props.name}</p>;
const Wrapper = Component => props =>
浏览 7提问于2019-05-24得票数 20
回答已采纳
我有一个，这里我使用mobx ("mobx- React "："^6.1.8")并使用。
我得到了错误:无效的钩子调用。只能在函数组件的主体内调用钩子。
商店index.js
import { useContext } from "react";
import UserStore from "./UserStore";
import SettingsStore from "./SettingsStore";
const useStore = () => {
return {
UserStore
浏览 5提问于2020-03-10得票数 1
1回答
我试图在localstorage中实现NextJS钩子，但是得到了以下错误：Error: Hydration failed because the initial UI does not match what was rendered on the server.。有什么原因吗？在我看来，useEffect函数似乎没有得到正确的使用。如何强制CSR而不是SSR来避免水化误差？
import { useState, useEffect } from 'react';
function useLocalStorage<T>(key: string, initialVa
浏览 11提问于2022-10-04得票数 1
我试图使用useMediaQuery来响应javascript媒体查询，但是我无法让它工作，我得到：-
错误消息："useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function
游乐场
我想这是media-query.ts第4行的错误
import { useState, useEffect } from 'react'
const useMediaQue
浏览 0提问于2020-11-07得票数 0
回答已采纳
2回答
取自
不要在循环、条件或嵌套函数中调用钩子。
考虑到react的这一建议，在呈现道具函数的顶部使用钩子是否不可取？假设它依赖于函数返回的值。
const MyComponent = () => (
<RenderPropComponent>
{value => {
React.useEffect(() => {
// Magic
}, [value]);
return <p>Hello</p>;
浏览 0提问于2019-03-21得票数 11
回答已采纳
具有如此简单的反应成分：
import React, { FunctionComponent, useEffect, useState } from 'react';
export function useMediaQuery(query:string) {
console.log("useMediaQuery")
useEffect(() => {
console.log("useEffect outer")
// ...
});
}
const Sidebar:
浏览 10提问于2022-02-10得票数 0
我有一个非常基本的自定义钩子，它接受从firebase返回文档的路径
import React, { useState, useEffect, useContext } from 'react';
import { FirebaseContext } from '../sharedComponents/Firebase';
function useGetDocument(path) {
const firebase = useContext(FirebaseContext)
const [document, setDocument] = use
浏览 0提问于2019-11-27得票数 27
我需要在useEffect()中获取一个api。我尝试这样做，它抛出了以下错误：Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
我的代码如下：
-Api，我需要获取：
export const fetchMyApi = async (code) => {
const { data } = await useQuery("data", () =>
clientAPIs.getData(code)
);
ret
浏览 4提问于2021-07-22得票数 2
回答已采纳
我在React Native应用程序中尝试获得准确的计时时遇到了一个问题。下面是我的问题的一个基本版本。 我可以通过使用setTimeout让它工作，但是它不准确，我正在尝试使用useTimer，这是一个精确的计时器。但是，当我在useEffect中而不是在组件主体中创建计时器时，我得到了一个Invalid Hook Call, Hooks can only be called inside the body of a function component 正在努力寻找解决这个问题的方法。 import React from "react";
import { View, T
浏览 84提问于2021-08-29得票数 0
3回答
ExceptionsManager.js:179错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多个React副本。
在Playbutton组件中获取此错误
Playbutton.js
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "
浏览 8提问于2022-03-14得票数 0
因此，我创建了一个需要在页面视图上触发的自定义钩子
所以我想我可以在useEffect里面调用这个钩子，但这看起来不可能
有人知道我是怎么做到的吗？
一旦我启动它，它就会触发Google，所以它必须装载。这个是可能的吗？
好的，这里有一个例子
export const usePageView = props => {
const counter = useSelector(state => state) // useSelector coming from react redux
console.log(counter, '===')
}
impo
浏览 1提问于2020-03-12得票数 0
1回答
我正试着写一个定制的抓取钩子，但我想我遗漏了什么。
import React, { useContext } from 'react';
import { Context } from "../components/context";
const fetchHook = async(url: string, bearer: string, method: string, body: any ) => {
const { global } = useContext(Context) as {global: any};
let headers
浏览 2提问于2019-10-04得票数 1
回答已采纳
我被困在无效的钩子警告。这是一个第三方依赖，这也使得它难以控制。但这是一个引起问题的密码，
export class Component {
constructor() {
this._initReact();
}
_initReact(displayName) {
const component = React.forwardRef((props = {}, ref) => {
const _a = Object.assign(Object.assign({}, this._props), props),
浏览 3提问于2021-06-12得票数 0
回答已采纳
1回答
反应学习者在这里。
我创建了一个新的react类型记录应用程序：
npx create-react-app my-app --template redux-typescript
在示例代码中，我添加了一个useEffect，只在第一次呈现组件时分派操作：
在src\features\counter\Counter.tsx中
const dispatch = useAppDispatch();
...
useEffect(() => {
dispatch(increment())
}, [dispatch]);
我还添加了另一个按钮来更改该组件中的
浏览 6提问于2022-05-28得票数 0
回答已采纳
我读过很多关于在React中创建和使用自定义钩子的文章，但是我不明白为什么我的代码不能工作。
以下是问题代码的核心：
cont MyContextProvider = (props) => {
const useCompleteWizard = () => {
// Define `body` object
useEffect(() => {
// const { loading, data } = useFetchPost(`${API_ROOT()}account_management/fleets`, body, app.awsCo
浏览 0提问于2019-08-26得票数 0
谁能告诉我为什么我不能在nextjs中给窗口对象附加一个事件监听器？当我尝试'resize‘事件时，一切正常，但是'load’事件似乎无法识别'load‘事件。 import { useEffect } from "react";
export default function Home() {
useEffect(() => {
window.addEventListener("load", (e) => console.log(e));
});
return <div>Hello wo
浏览 16提问于2021-11-09得票数 0
1回答
我在我的Airtable块扩展中得到了这个错误: Error:无效钩子调用。钩子只能在函数组件的主体内调用。
我不知道为什么。我的程序使用airtable创建一个下拉列表，在useState更新数据库之前设置一个useEffect值。这两个钩子都是在函数体中使用的，函数应该是一个反应性组件，所以我不知道错误在哪里。我已经看到，这可能是因为响应版本冲突等等，但我不知道如何确认这是否是根本问题。
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
浏览 16提问于2022-09-06得票数 0
更新
@Chris在下面的回答帮助我解决了我的问题。安装包并设置代码，如下所示。现在一切都完美无缺了！)
const [value] = useCollection(collection(db, `${sessionUserId}`), {
snapshotListenOptions: { includeMetadataChanges: true },
})
useEffect(() => {
if (value) {
const allData = JSON.parse(
JSON.stringify(
value
浏览 6提问于2022-11-08得票数 0
回答已采纳
2回答
我构建了一个简单的项目，通过使用if和else语句保护网站的路由/页面，并使用函数withAuth()放置每个页面，但我不确定这是否是使用nextjs保护路由的最佳方式，我注意到在保护路由或页面方面出现了延迟，比如2-3秒长，在页面重定向访问者或未注册用户之前，他们可以看到页面的内容。
有没有办法摆脱它或使请求更快，使未注册的用户不查看页面的内容？是否有更好的方法来保护nextjs框架中的某个路由？
代码
import { useContext, useEffect } from "react";
import { AuthContext } from "@conte
浏览 6提问于2021-11-23得票数 0
回答已采纳
我正在尝试使用UseEffect react钩子，但收到错误: React hook "useEffect“在函数"cockpit”中被调用，该函数既不是React函数组件，也不是自定义React Hook函数 import React, { useEffect } from "react";
import styled from "styled-components";
import "./cockpit.css";
// it is a css code
const StyledButton = styled.button
浏览 35提问于2020-07-26得票数 0
回答已采纳
我可以使用类组件中的功能组件吗？我将调用从类组件中的函数组件中提取的函数。但它带来的错误如下所示。
未处理的拒绝(错误)：无效钩子调用。钩子只能在函数组件的主体内调用。这种情况可能发生的原因如下之一，
因此，我试图在functional中调用它，但在中，即使在functional中，我也得到了与在类组件中调用它时相同的错误。
功能部件
import React, { useEffect } from 'react';
import { UseWalletProvider, useWallet } from 'use-wallet';
import
浏览 30提问于2021-12-16得票数 2
回答已采纳
我找到了一个非常，我想在useEffect中使用这个钩子(这违反了规则)
const useFetch = (url, options) => {
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);
React.useEffect(() => {
const fetchData = async () => {
try {
const res = await fetch(url,
浏览 6提问于2021-05-28得票数 0
我正试着为一个项目建立一个倒计时网站。我希望倒计时由一个按钮触发。我用的是React，但我一直收到这个错误
React "useEffect“在函数”倒计时“中被称为”倒计时“，它既不是React函数组件，也不是自定义React函数。React组件名称必须以大写字母开头。
我反应很新，有人能给我一些建议来解决这个问题吗？
守则：
import './App.css';
import React, { useEffect, useState } from 'react';
function App() {
const time = 20;
con
浏览 2提问于2021-04-06得票数 1
我试图使用从fetchData钩子获取数据，但奇怪的是，它会产生以下错误->
Line 26:31: React Hook "useReducer" is called in function "fetchData" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Line 28:5: React Hook "useEffect" is called in functi
浏览 10提问于2020-07-21得票数 1
回答已采纳
我正在尝试基于表单提交在功能组件中进行API调用：
const SearchForm = () => {
const [keywords, setKeywords] = useState('')
const [fetchedData, setFetchedData] = useState('')
const handleSubmit = (e) => {
e.preventDefault();
useEffect(() => {
async function fe
浏览 1提问于2020-06-08得票数 11
回答已采纳
是否有允许在函数组件之外分配useState的语法？到目前为止，我已经尝试过了，但是它没有起作用：
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
useEffect(() => setStateData("from useEffect"), []);
return <div className="App">{stateData}</div
浏览 5提问于2019-12-16得票数 6
回答已采纳
我是使用ReactJS/NextJS的初学者。我正在创建一个旋转木马组件来使用NextJS框架中的图像优化功能。旋转木马组件工作良好，我想添加下一个幻灯片时，当道具的持续时间将被自动添加。我试图在UseEffect钩子中使用setTimeout创建一个函数来执行我的下一张幻灯片。
我试过这个代码：
import React, { useState, useEffect } from 'react';
import styles from 'components/shared/carousel/carouselStyles.css';
import Navigat
浏览 0提问于2021-07-22得票数 1
回答已采纳
1回答
调用钩子中另一个类的方法
、、、
大家好，我有一个关于反应本土化的问题。( 1)我如何在钩子中调用另一个类？例如，如果我有：
import React, { Component, useEffect, useState} from 'react';
import { TextInput } from 'react-native-paper';
import { View,Text} from 'react-native';
import Utils from './Utils';
export default function Userprofile() {
浏览 9提问于2022-09-04得票数 0
回答已采纳
在这个项目中，我使用react传单来显示由GEOJSON特性对象生成的地图。我只是去一个动态的乡村路线，当点击每个国家层。
const geoJsonRef = useRef();
useEffect(()=>{
geoJsonRef.current.getLayers().map((layer)=>{
layer.on({
click : ()=>{
useNavigate( 'go/to/country' ); // here is the error occurs
浏览 5提问于2021-12-10得票数 1
回答已采纳
无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多个React副本。
当我尝试使用Expo提供的Camera来拍照时，我得到了这个错误。我的实际问题是，它在我的android设备上运行，没有任何错误，但是每当我在浏览器上运行这个应用程序--即反应DOM --它就会在控制台中产生这个错误。
下面是我从复制的代码，
import { Camera } from "expo-camera";
import { useEff
浏览 13提问于2022-03-17得票数 1
1回答
如何测试功能组件异步调用
、、、
我有一个功能部件。在组件中，我调用了SpecialistsListService服务。该服务通过Axios调用API。我必须测试异步函数、getSpecialistsList和useEffect函数，但是没有人帮助我解决这个问题。当我使用类组件时，我只需调用像这样的方法，等待，然后检查状态，但是我认为功能组件方法是不同的。
import React, { useState, useEffect } from "react";
import SpecialistsListService from "../../../services/specialists";
i
浏览 0提问于2021-03-08得票数 1
回答已采纳
我遇到了问题，在多个文件中使用钩子，并且在第一个异步方法完成之前为useEffect调用了两次钩子(这应该阻止第二个钩子调用，但它不是)。见下文2种情况：
堆栈导航器
const { context, state } = useLobby(); // Hook is called here 1st, which will do the initial render and checks
return (
<LobbyContext.Provider value={context}>
<LobbyStack.Navigator>
{state.r
浏览 2提问于2020-06-01得票数 6
回答已采纳
我正试图让引导工具提示在我的NextJS项目中工作。我有一些引导工作的其他部分需要JS，但是工具提示需要一些使用document.querySelectorAll的JS，这就是我遇到问题的地方。引导程序文档中的代码是：
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
retur
浏览 7提问于2021-12-15得票数 -1
回答已采纳
我正在努力学习nextjs13和打字本。我导入了useRef钩子，它给了我一个错误。
这是密码。
import { useEffect, useRef } from "react"
export const useDraw = () => {
const canvasRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
}, [])
return { canvasRef }
}
import { FC } from "rea
浏览 15提问于2022-11-19得票数 0
1回答
我正在尝试从自定义钩子中获取屏幕尺寸，但我不知道如何使用导入组件的结果。
显然，我可以使用{MyDims.Width}和{MyDims.Height}来显示结果，但是对于我的最后一个脚本，我需要使用这两个对象作为字符串，因此需要使用useState()。
下面是导入的组件: getdimensions.js
import React, {
useState,
useEffect
} from "react";
import {
Dimensions
} from "react-native";
function App(props) {
co
浏览 1提问于2020-08-15得票数 1
回答已采纳
我正在尝试使用React和Easybase (数据库)。不过，我有一些问题。
这在SolanaSignature.tsx文件中。
import { useWallet } from '@solana/wallet-adapter-react';
import bs58 from 'bs58';
import React, { FC, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { sign } from 'tweetnacl
浏览 8提问于2022-01-23得票数 0
回答已采纳
我正在尝试查询一个api，以便在用户登录后获取用户权限。但是，如果我在useEffect()中编写useQuery()，因为它破坏了React的rules of hooks，就会发生InvalidHookError。 const OnHeader = () => {
const [user, loading, error] =
typeof window !== "undefined" ? useAuthState(firebase.auth()) : [null, true, null]
useEffect(() => {
浏览 20提问于2021-02-01得票数 0
回答已采纳
我希望这是一个简单的问题。我搞不懂它为什么要这么做。无论如何，使用NextJS，我尝试使用useRouter钩子访问路由器中的params，并将其与querystring插件结合使用来拆分asPath，因为如果使用无状态，NextJS不允许您访问路由器的查询部分。这是我的密码：
import { useRouter } from 'next/router';
import queryString from "query-string";
const withPageRouter = (router) => {
router.query = { .
浏览 9提问于2021-02-26得票数 0
回答已采纳
随着react钩子的到来，我们是否应该为React自定义钩子使用prop-type，例如， import React from 'react';
import PropTypes from 'prop-types';
const useTitle = title => {
React.useEffect(() => {
document.title = title;
}, [title]);
}
useTitle.propTypes = {
title: PropTypes.string.isRequired,
};
浏览 34提问于2019-01-22得票数 21
在React 18中，由于各种原因，存在严格的mount -> unmount -> mount模式。我试图在useEffect钩子中放置一个API调用，并试图找出编写清理的最佳方法，以便在再次挂载时不会再次触发API调用。
function componentName(){
useEffect(() => {
fetchCall(); // Want to call this once
},[]);
return(<div></div>)
}
使用组件级状态检查是否进行了
浏览 4提问于2022-07-04得票数 1
我有一个web应用程序，它是一个keycloack.js实例，在UI呈现之前，我尝试使用自定义钩子来获取用户配置文件。原因是，实际应用程序需要在ui呈现之前在localStorage中提供一些信息。
下面是我尝试在App.js组件中实现的逻辑
import React, {Suspense} from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'appkit-react/style/appkit-react.default.css';
import PageHub fro
浏览 1提问于2020-02-07得票数 0
回答已采纳
我刚刚创建了一个内部使用useState和useEffect的自定义钩子。
当我将这个钩子导入到另一个React组件中时，当自定义钩子中的状态发生变化时，调用它为ComponentA，ComponentA重新呈现。
当它使用的钩子返回新值时，ComponentA应该重新呈现是否正确？
请参阅代码中的注释，以获得更多的问题说明。
代码：
const ComponentA = props => {
const myValue = useMyValue();
// COMMENTS:
// Whenever myValue returns a new value, Compone
浏览 0提问于2019-05-28得票数 9
回答已采纳
我想在一个常规函数中使用我的自定义钩子，如下所示，但是React不让我这么做。我想知道是不是我的useUrl自定义钩子无效，或者调用钩子有问题。 const handleAddFormation = async () => {
console.log('add formation')
await useUrl('POST', 'http://localhost:1337/formations', newFormationList)
setNewFormationList([])
setModalOpen
浏览 91提问于2021-08-29得票数 1
我有个问题是关于弹射-插件-反应-挂钩。
我希望减少执行API调用并将结果存储到状态的样板代码，因此我创建了一个自定义钩子：
export const loading = Symbol('Api Loading');
export const responseError = Symbol('Api Error');
export function useApi<T>(
apiCall: () => CancelablePromise<T>,
deps: DependencyList
): T | (typeof l
浏览 7提问于2020-02-06得票数 6
回答已采纳
我有react组件，它需要从组件内部使用自定义的react钩子。
但是，只有在启用功能切换时才应该调用此钩子。我理解这是一种反模式，因为它违背了这里的钩子规则：。
因此，我的组件文件大致位于以下结构中：
const someFeatureToggle = useSomeFeatureToggleHook(React);
const callBackMethod = ()=>{
// doing the logic
}
const someRef1 = React.useRef();
const someOtherRef = Rea
浏览 4提问于2022-02-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
