第31:7行: React Hook缺少一个依赖项：‘useEffect’。要么包含它，要么删除依赖数组？
React Hook缺少一个依赖项：‘useEffect’是一个警告提示，它告诉我们在使用React的useEffect Hook时，应该考虑将其所依赖的变量添加到依赖数组中。依赖数组是一个可选的参数，用于指定在哪些变量发生变化时，useEffect的回调函数应该重新执行。
要解决这个警告，有两个选项可以选择：
- 包含缺少的依赖项：根据警告提示，我们可以将‘useEffect’作为依赖项添加到依赖数组中。这可以确保在‘useEffect’发生变化时，回调函数会重新执行。在这种情况下，如果你确信‘useEffect’不会改变，可以在依赖数组中添加它，如下所示：
useEffect(() => {
// 执行的副作用代码
}, [useEffect]);- 删除依赖数组：另一种解决方法是删除依赖数组。这意味着无论哪个变量发生变化，都会触发回调函数的重新执行。在某些情况下，这可能是你想要的结果，但要小心使用，以免造成无限循环的效果。
无论你选择哪个选项，都要根据具体的情况和需求来决定。记住，为了代码的可读性和可维护性，建议在使用useEffect时，考虑将其所依赖的变量添加到依赖数组中。
关于React Hook的更多信息，你可以参考腾讯云的相关产品文档和介绍：
- 腾讯云产品文档：React Hook
- 腾讯云产品介绍：React Hook - 简化React函数组件的状态管理
相关·内容
我有一个useEffect钩子：
useEffect(() => {
setTop(t => t + (controller.position.y * tileSize))
setLeft(l => l + (controller.position.x * tileSize))
}, [controller.position])
我希望它只在position改变的情况下进行加法。如果tileSize改变了，我只想让它做乘法。
我试着将其放入两个useEffect中，但随后得到了React Hook useEffect has missing dependencies警
浏览 2提问于2019-09-08得票数 5
回答已采纳
2回答
我有一个问题，原因是ESLINT输出控制台中的一个错误。我想解决控制台中的问题。请检查这里的代码框
更新问题
The 'callbackFunction' function makes the dependencies of useEffect Hook (at line 33) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'callbackFunction' in its own useCallback
浏览 20提问于2021-04-13得票数 13
回答已采纳
对这个琐碎的问题(也许)很抱歉，但我已经打了好几个小时了。哪里出错了？
import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { SingleCoin } from '../config/api';
const {id} = useParams();
const [coins, setCoins] = useState();
const {currency, symbol} = CryptoState();
useEff
浏览 18提问于2022-07-03得票数 0
回答已采纳
2回答
我已经创建了自己的React，但是当我使用来自自定义钩子的函数时，我有React Hook useEffect has a missing dependency: 'setPlayer'. Either include it or remove the dependency array警告。我尝试从钩子中提取函数以避免在每次呈现时创建一个新的函数实例，也尝试了useCallback，但仍然存在相同的问题。
当我使用useReducer时，我可以在没有任何警告的情况下在我的useEffect中使用dispatch，到底有什么区别呢？
我的习惯与警告挂钩：
export funct
浏览 3提问于2021-10-07得票数 0
回答已采纳
我收到了这些小错误
./components/create-nft/InstagramSelector.js
39:15 Warning: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
useEffect(() => {
async function fetchData() {
// You can await here
const response = await MyAPI.getData(someId);
// .
浏览 2提问于2022-05-06得票数 1
如何修复此警告？ React Hook useEffect缺少依赖项：'loading‘。要么包含它，要么删除依赖数组react-hooks/exhaustive deps。 useEffect(() => {
if (!loading && data) {
dispatch(action.TODO(data));
}
}, [data, dispatch]);
浏览 32提问于2021-04-21得票数 0
回答已采纳
1回答
useEffect不是第一次触发
、、、、
import React, { FC, useEffect } from "react"
import YouTube from "components/YouTube"
import { Typography } from "@mui/material"
import { Container } from "layouts/Player/emotion"
import Box from "@mui/material/Box"
import VideoGrid from "components/
浏览 5提问于2022-08-18得票数 0
回答已采纳
2回答
我尝试在useEffect中更新数据，但在控制台中显示警告。
React Hook useEffect has missing dependencies: 'dispatch', 'id', and 'state.selectedHotel'. Either include them or remove the dependency array react-hooks/exhaustive-deps
码
import { GlobalContext } from "../../../context/globalContext";
浏览 10提问于2021-06-24得票数 2
回答已采纳
在我的useEffect代码中，我分派了一个从片中获取的操作。
但是它会抛出错误"React Hook useEffect has missing dependencies“，因为在钩子内部我正在使用操作和分派
...
const { actions } = useDataListSlice();
....
useEffect(() => {
dispatch(actions.loadInitialState());
}, []);
我可以向依赖数组添加操作和分派，但我不确定在其中添加操作和分派是否正确
浏览 2提问于2021-06-15得票数 1
尽管尝试了不同的方法，我似乎还是找不到答案。我一直收到错误：
Line 18:5: React Hook useEffect has a missing dependency: 'execute'. Either include it or remove the dependency array react-hooks/exhaustive-deps
printWarnings
在此文件上：
import {useEffect, useState} from 'react'
export const createEffect = (fs, depende
浏览 14提问于2019-11-12得票数 0
回答已采纳
我有一个月的选项数组，我在useEffect中使用它，但是得到了deps的警告。请指导如何使用useMemo。我收到了如下警告：“options”数组使useEffect Hook (在第83行)的依赖项在每次呈现上发生变化。要解决这个问题，请将“选项”的初始化封装在它自己的useMemo Hook react钩子/详尽-deps中。
const options = [];
useEffect(() => {
if (financialMonth) {
options.forEach((item) => {
if (Number(item.value) =
浏览 3提问于2021-12-17得票数 2
回答已采纳
我是react的新手，并且是第一次使用useEffect。我收到了丢失依赖的警告，但这个应用程序工作得很好。如何解决警告问题？或者可以忽略这个警告？ useEffect(() => {
setValid(true);
}, []}; 我收到警告: React Hook缺少依赖项：‘useEffect’。
浏览 16提问于2021-04-21得票数 2
我正在尝试用react钩子构建一个redux进程，下面的代码是我想要用一个getUsers(redux action)调用来模拟一个ComponentDidMount函数，这是一个获取数据的http请求。
第一个版本是这样的
const { state, actions } = useContext(StoreContext);
const { getUsers } = actions;
useEffect(() => {
getUsers(); // React Hook useEffect has a missing dependency: 'getUsers'
浏览 2提问于2019-12-08得票数 5
我已经创建了一个音乐播放器，作为我正在进行的项目的一部分，但是我有这个错误。有人有解决办法吗？
eslint src\components\MusicPlayer.jsx第48:9行: React缺少一个依赖项：“togglePlay”。要么包含它，要么删除依赖数组react/react。
我已经把这个例子的代码缩短了。任何帮助都将不胜感激！
import React, { useState, useEffect, useRef } from 'react'
function MusicPlayer({songs}) {
//Test
const son
浏览 3提问于2022-11-11得票数 1
回答已采纳
我正在尝试在发布和运行React错误之前进行第一个React：“remove缺少依赖项：'colors‘和'options’。要么包含它们，要么删除依赖数组。
我的组件在最后一行显示了错误。我做错了什么？
function MemoryGame({ options, setOptions, highScore, setHighScore }) {
const [game, setGame] = useState([]);
const [flippedCount, setFlippedCount] = useState(0);
const [flippedIndexe
浏览 8提问于2021-02-02得票数 3
回答已采纳
1回答
我有一个子组件，它通过一个事件向父组件发出一个操作：
子组件：
export default function ChildComponent(props) {
const classes = useStyles();
const [value, setValue] = React.useState([0, 5]);
const handleChange = (_, newValue) => {
setValue(newValue);
props.updateData(newValue)
};
return (
<div classNa
浏览 1提问于2020-11-14得票数 3
回答已采纳
只是一个新手的问题，我想知道我该怎么做才能使工作成为我在useEffect上遇到的错误
第15:6行: React缺少一个依赖项：‘刷新锁定’。要么包含它，要么删除依赖数组react/react。
import { useState, useEffect } from "react";
function App() {
const { time, setTime } = useState(new Date());
function refreshClock() {
setTime(new Date());
}
useEffect(() =>
浏览 15提问于2022-08-12得票数 0
回答已采纳
我正在用React建立一个网站，我不知道如何解决这个问题。 useEffect(() => {
const generateToken = async () => {
try {
const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });
setCheckoutToken(token);
} catch (error) {
history.pushState('/');
浏览 33提问于2021-06-21得票数 0
回答已采纳
// Fetch Products
const fetchProducts = async () => {
const { data } = await axios.get('/api/products')
setProducts(data)
}
// Retrieve all products at reload
useEffect(()=>{
fetchProducts()
},[])` 这是一个简单的函数，用于在加载主页组件时检索产品。因此，每次加载时都应该运行fetch
浏览 48提问于2021-09-06得票数 1
回答已采纳
我有两个互相交谈的成分。在组件A中，我有一个位置列表，每当用户单击该组件中的某个位置时，这将根据单击的位置筛选组件B中的属性列表。到目前为止还不错。但是在组件B中，我使用一个useEffect钩子来检查通过组件A的道具到达它的selectedLocation变量，这样我就可以更新状态。在这个useEffect()调用VS代码中，"React Hook有一个缺失的依赖项"...dataState“，但是我当然不能将dataState放到依赖数组中，因为它会导致无限循环。顺便说一句，dateState是通过useState Hook管理的。下面是my useEffect钩子：
浏览 5提问于2021-11-05得票数 0
回答已采纳
我是新的反应，并试图制作一个加载/问候页面，导航到下一个在几秒钟后显示。在function路由器v6中，我们有允许您控制导航的useNavigate()钩子，我正在使用它通过在useEffect()钩子中设置一个超时来成功地调用导航函数。但是，编译器正在抱怨我缺少一个依赖项。不过，我只希望它运行一次，而不是当navigate发生变化时。做这件事最好的方法是什么？
谢谢!
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
function Gree
浏览 33提问于2022-09-14得票数 4
回答已采纳
3回答
我正在开发一个react网站来帮助TFserving
在我的文件home.js中，下面的行中有一个错误
useEffect(() => {
if (!preview) {
return;
}
setIsloading(true);
sendFile();
}, [preview]);
错误消息：-
React Hook useEffect has a missing dependency: 'sendFile'. Either include it or remove the dependency array.
浏览 9提问于2022-03-23得票数 0
回答已采纳
2回答
我正在设计一个钩子，只有当钩子依赖项发生变化时才能获取数据。与预期的一样工作，但我收到链接警告：
React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.
和
React Hook useEffect has missing dependencies: 'data', 'errorHa
浏览 15提问于2019-09-18得票数 4
回答已采纳
1回答
我似乎无法找到正确的方法来解决这个问题。想要得到警告的乘坐，而不是让内联忽略警告评论。可能useCallback正朝着解决方案的方向发展。我只想检查一次功能组件是否被初始化，如果商店需要，有条件的。仅此而已。
Line 72:6: React Hook useEffect has missing dependencies: 'dispatch' and 'storedSlugItems'. Either include them or remove the dependency array react-hooks/exhaustive-deps
useEff
浏览 13提问于2021-12-24得票数 0
回答已采纳
这是我的密码：
const dfEventQuery = async (event: string) => {
const {
data: { result }
} = await axios.post("/api/df_event_query", { event, userId });
for (let msg of result.fulfillmentMessages) {
const botSay: MessageDataType = { speaks: "bot", msg };
se
浏览 0提问于2020-01-05得票数 0
回答已采纳
React正在发出警告：
'someUnchangingArray‘数组使useEffect Hook (第42行)的依赖项在每次呈现时都发生变化。将其移动到useEffect回调中。或者，将'someUnchangingArray‘的初始化封装在它自己的useMemo() Hook react钩子/详尽-deps中。
为什么？someUnchangingArray是一个常量且不会改变，为什么render暗示它将在每次呈现时触发useEffect？
export default function Component(
const [initialized, setIni
浏览 2提问于2022-02-14得票数 0
我理解，useEffect需要依赖项数组中的依赖项，但是当我将其与useState结合时，将有一个无限循环：
const [valid, setValid] = useState(false);
useEffect(() => {
setValid(true);
}, [valid]};
这就是为什么我用它就像：
useEffect(() => {
setValid(true);
}, []};
因此，我得到：
React Hook useEffect has a missing dependency: 'setValid'.
我怎么才能摆脱警告呢？
浏览 4提问于2021-03-14得票数 0
回答已采纳
1回答
在加载NotFound组件时，我希望通过将值作为参数来处理作为支持发送的方法。为此，我还使用了useEffect。目前，我得到了我想要的，但我得到了以下警告，我无法找到如何摆脱它！
import React, { useEffect } from "react";
import NotFound404 from "../assets/images/nfx404.png";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
浏览 15提问于2022-11-15得票数 1
3回答
在创建了一个函数来设置值数据、当前用户loggedin并在useEffect中调用它之后，我收到了一条警告消息。下面是代码：
import React, { useEffect, useState } from "react";
...
const AddPost = () => {
const userStorage = sessionStorage.getItem('user');
const [values, setValues] = useState({
userId: '',
authorName: &#
浏览 1提问于2020-11-10得票数 0
回答已采纳
2回答
我正在用一些useEffect钩子开发一个React。假设我有以下代码：
import React, { useState, useEffect } from 'react';
export default () => {
const [fooArr, setFooArr] = useState([]);
const [barObj, setBarObj] = useState({});
return <h1>{barObj.name + " " + barObj.status}</h1>
}
但是现在问题是。foo
浏览 0提问于2020-05-26得票数 2
回答已采纳
我尝试使用useEffect，但得到如下所示的错误：
React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array
这是我的组件，
let id = props.location.pathname.split("--")[1];
let str = props.location.pathname.split("--")[0].substr(1);
const data = {id: id, link:
浏览 1提问于2019-11-08得票数 0
假设我这样做
// Get a hook function
const {
useState,
useEffect
} = React;
const Example = ({
title
}) => {
const [formVal, setFormVal] = useState("")
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1)
// now use increment as just the cb for
浏览 1提问于2020-04-22得票数 2
在这里实现钩子代码时
我收到以下警告，这到底是什么意思？
./src/components/Users.tsx第20:6行: React Hook useEffect缺少一个依赖项：'data.users‘。包括它或删除依赖项数组。如果'setData‘需要'data.users’反应挂接/穷举-deps的当前值，也可以用useReducer替换多个反应变量
代码：
import React, { useEffect, useState } from "react";
import axios from "axios";
const U
浏览 13提问于2020-05-11得票数 0
回答已采纳
useEffect(() => {
let interval = null;
if (isOn) {
interval = setInterval(() => {
counting();
}, 1000);
} else {
clearInterval(interval);
}
return () => clearInterval(interval);
}, [isOn, currentTimeMs]);
const counting = () => {
setCur
浏览 4提问于2020-05-14得票数 1
回答已采纳
我使用useEffect存储初始数据
export const ChannelConfig = (id) => {
const history = useHistory();
const dataUrl = "/channel/"+id;
useEffect(() => {
fetch(dataUrl + "/configure")
.then((resp) => {
if (resp.ok) {
return resp
浏览 5提问于2020-06-03得票数 0
21回答
使用Reactive16.8.6(在以前的16.8.3版本中很好)，当我试图阻止获取请求上的无限循环时，我会得到这个错误：
./src/components/BusinessesList.js
Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array react-hooks/exhaustive-deps
我一直无法找到阻止无限循环的解决方案。我想远离使用useReducer()。我确实
浏览 16提问于2019-04-25得票数 719
回答已采纳
useEffect(() => {
calculateTip();
}, [bill, tipPercentage, numberOfPeople]);
const calculateTip = () => {
const tip = ((tipPercentage / 100) * bill).toFixed(2);
const tipPerGroup = ((tipPercentage / 100) * bill * numberOfPeople).toFixed(
2
);
setTipPerGroup(tipPe
浏览 2提问于2022-05-27得票数 1
回答已采纳
我将isLoading状态更改为上下文提供程序，此错误发生在React Hook useEffect has a missing dependency: 'setIsLoading'. Either include it or remove the dependency array
这个应用程序和以前一样工作。我想理解这个警告。
这是我的代码：
const { isLoading, setIsLoading } = useContext(LoadingContext);
useEffect(() => {
const getCountries = async
浏览 0提问于2020-01-28得票数 0
回答已采纳
我想用useEffect Hook来询问我的案子，并和useSelector做对立面。我真的不知道这个无限循环后，我把我的变量包含的useSelector，有一堆数据数组从redux。我打算在参数useEffect上添加这个变量，因为我想直接更新数据和同一页面上的数据显示。
// this itemGroup have all of data from getGroup
const itemGroup = useSelector(selectGroup);
//this function call get api Data and dispatch to initial state
浏览 3提问于2022-08-08得票数 0
回答已采纳
我在React中有一个功能组件： export default function (id) {
const [isReady] = useConfig(); //Custom hook that while make sures everything is ok
useEffect( () => {
if(isReady)
renderBackend(id);
});
async function renderBackend(id) {
const resp = await getBackend
浏览 45提问于2021-07-29得票数 0
2回答
我在这里的目标是在useEffect中调用操作。 const ShowTodos = (props) =>{
useEffect(()=>{
props.fetchTodos()
},[])
}
const mapStateToProps = (state)=>{
return {
todos:Object.values(state.todos),
currentUserId:state.authenticate.userId
}
}
export default connect(mapStateToProps,{fetchT
浏览 25提问于2019-04-30得票数 6
回答已采纳
3回答
我有一个使用react和Next.js构建的React页面，看起来如下所示。
import Head from 'next/head';
import { useEffect, useState } from 'react';
import Header from '../components/Header';
export default function Home() {
const ticksPerSecond = 10;
const [points, setPoints] = useState(10);
con
浏览 6提问于2021-07-27得票数 1
回答已采纳
我是一个新的react，最近我刚刚通过制作一个简单的购物车功能来练习react
这是我得到错误的代码的一部分：
const MainShop = () => {
const [products, setProducts] = useState([]);
const [category, setCategory] = useState('');
const [sort, setSort] = useState('');
const [filteredProducts, setFilteredProducts] = useState([]);
浏览 2提问于2021-06-01得票数 0
CODE HIGHLIGHTED IN GITHUB useEffect(() => {
async function getTok() {
await Gettestimon();
alldoc.map(forget => console.log(forget.name));
setcondi(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}
getTok();
}, []); 嗨，我有一个查询，真的很抱歉，如果它是一个旧的或非常著名的一个，但每当我编译突
浏览 50提问于2020-12-06得票数 0
回答已采纳
所以我有这个应用程序，它有针对不同api端点的大约6个提取函数，我在我的终端上收到了一个警告错误--相同的函数名，表明我应该将它包含在我的useEffect的依赖数组中。我的函数在useEffects之上。这个过程是在第一次加载时，我想让它们全部获取，然后只有当它们选择另一个源或类型时才会再次获取--它完成了我想要的工作，但为什么我会看到这些警告呢？
useEffect(() => {
fetchTtype()
fetchSource()
fetchSet()
}, [chosenType, chosenSource])
useEffect(() =>
浏览 1提问于2022-10-07得票数 0
回答已采纳
我想了解关于useEffect和eslint的3种“为什么”，以及关于useEffect如何定义何时触发的总体“如何”。
问题以注释形式出现在代码示例中。
。
import React, { useEffect, useState, useCallback } from "react";
import ReactDOM from "react-dom";
function App() {
// Case A
// why eslint want a as dependensy if it works fine?
const [a, setA] =
浏览 0提问于2020-10-11得票数 0
回答已采纳
在我的控制台中得到这个错误。不知道怎么处理它们
我正在传递guildId，所以我不知道为什么它会记录这个错误
src/utils/hooks/useFetchGuildBans.tsx
第22:6行: React缺少一个依赖项：'guildId‘。要么包含它，要么删除依赖数组react/react。
这是我的useFetchGuildBans.tsx
import { useEffect, useState } from 'react';
import { getGuildBans } from '../api';
import { GuildBan
浏览 4提问于2022-04-26得票数 0
回答已采纳
得到这个：
-React Hook useEffect缺少一个依赖项：“getData”。
要么包含它，要么删除依赖数组。
useEffect(() => {
setInterval(() => {
getData();
}, 300);
}, []);
在getData中调用api
const getData =useCallback( () => {
axios.get(`${API_ENDPOINT}/api`,
{
headers: {
'Acc
浏览 5提问于2022-03-17得票数 1
回答已采纳
我正在查看react中有关的文档，因为我在js中得到了这个错误。我试图像文档显示那样修改我的代码，但是我觉得我遗漏了什么，因为我仍然会遇到同样的错误。我将在尝试之前和之后发布我的代码。谢谢。
warning React Hook useEffect has a missing dependency: 'handleDocumentScrollThrottled'. Either include it or remove the dependency array react-hooks/exhaustive-deps
尝试修复之前的代码
/* Completed useDoc
浏览 2提问于2019-12-16得票数 0
回答已采纳
我正在使用ReactJS和谷歌FireStore创建一个简单的股票投资组合跟踪应用程序。如何在不触发警告"React Hook has a missing dependency“的情况下从useEffect中访问数据库函数？我尝试过使用useCallback，但到目前为止还没有成功。或者可以忽略这些警告？
var db = firebase.firestore();
useEffect(() => {
//get user's cost averages from db
if (props.userStatus) {
db.collect
浏览 4提问于2021-10-23得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
