useEffect会导致无限循环
useEffect是React中的一个钩子函数，用于处理副作用操作。副作用操作包括但不限于数据获取、订阅、手动修改DOM等。useEffect在组件渲染完成后执行，并且可以在组件的生命周期中多次调用。
当在useEffect中使用了某个状态或属性作为依赖项时，如果该依赖项发生变化，useEffect会重新执行。如果没有指定依赖项，则每次组件重新渲染时都会执行useEffect。
然而，如果在useEffect内部修改了依赖项，会导致无限循环的问题。例如，在useEffect中更新了某个状态，而该状态又作为依赖项传递给了useEffect，这样就会形成一个循环。
解决这个问题的方法有两种：
- 在useEffect的依赖项数组中添加一个空数组，表示该useEffect不依赖于任何状态或属性，只在组件挂载和卸载时执行一次。例如：
useEffect(() => { ... }, [])。 - 在useEffect内部使用条件判断，避免无限循环。例如，可以使用if语句或者判断前后状态是否相同。
总结起来，正确使用useEffect可以避免无限循环的问题，可以根据具体的业务需求和组件的生命周期来选择合适的依赖项或条件判断方式。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我有这个口袋妖怪api应用程序，它有一些问题，首先，当我获取口袋妖怪，它不断添加无限x口袋妖怪与1请求。其次，当我再次尝试输入一些东西时，这个应用程序就会完全冻结。代码如下：
应用程序：
import React from 'react'
import './App.css'
import {PokemonForm} from '@components/PokemonForm/PokemonForm'
import {PokemonProvider} from "@context/PokemonContext";
import {
浏览 1提问于2022-10-27得票数 0
回答已采纳
我在玩React钩子，我试着做一个非常基础的时钟。它工作得很好，甚至分析器都说没有奇怪的重新渲染。让我有点担心的是useEffect调用updateTimeAndDate的地方，这会改变状态。我觉得它应该进入一个重现循环。为什么它还能工作？我不能说得更好了，抱歉。:D
它还能更好一点吗？这就是它：
const addZero = (trunk) => (trunk >= 10 ? "" : "0") + trunk;
const [hours, setHours] = useState(addZero(0));
const [minutes, se
浏览 15提问于2020-07-20得票数 0
有人能解释一下为什么我的代码的useEffect()被困在一个无限循环中吗？我正在练习，反应和实现一个用户配置文件页面。无限循环是在我将图片上传到firebase时触发的，我的想法是，当我上传图片时，coverUrl会被更改为图片的url，在useEffect内部，如果我看到封面的变化，我会用上传的图片更新我的userData和数据库值。
Globalconfig保存一些状态变量，这些变量在登录期间(在另一个页面中)被填充，我在这个页面中使用它，但是等待它先加载。
const ProPicAndCover = () => {
const Globalconfig = useContext
浏览 5提问于2022-06-25得票数 1
回答已采纳
1回答
调用多个触发器
、、、
我的代码是这样的：
function App() {
const [first, setFirst] = useState(false)
const [second, setSecond] = useState(false)
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
gsap.to('.first', {
scrollTrigger: {
trigger: '.first',
start: 'top top
浏览 17提问于2021-03-09得票数 0
我正在使用react chartjs2来显示折线图。海图数据在useEffect中不断更新。该图表显示了数据。一切都很顺利。但我得到了这个钩子排气排气规则警告： 第51行: React钩子useEffect缺少依赖项：'chartData‘。包括它或删除依赖数组react-hooks/exhaustive deps 但是如果我添加了状态chartData，页面就会冻结，因为我认为它会进入无限循环。数据可能会持续调用。代码是： const [chartData, setChartData] = useState({
labels: [],
datasets:[]
}
浏览 16提问于2020-11-05得票数 0
当我点击编辑铅笔按钮时，我正试图填充我的表单，但我一直收到错误消息“to多次重新渲染”。这里有人能帮上忙吗？在我的两个文件下面，我使用firebase从集合中提取数据，基本上我尝试构建一个简单的应用程序，您可以在其中显示该数据库中的数据，然后最终对其进行编辑或删除 Contact.js import React, { useState, useEffect } from "react";
import ContactForm from "./ContactForm";
import firebaseDb from "../firebase";
浏览 16提问于2021-04-28得票数 0
每当我运行我的代码时，我都会收到这样的错误：“超过了最大更新深度。当组件在useEffect中调用useEffect时，这种情况可能发生，但是useEffect要么没有依赖项数组，要么每个呈现程序上的依赖项都会发生变化。”
我理解为什么会发生这种情况，但我不知道如何编写我的代码来实现我想做的事情。
我的代码是：
const CheckoutComponent = () => {
const { checkoutProducts } = useSelector((state)=> state?.allCartProducts);
const [totalPrice,
浏览 2提问于2022-11-04得票数 0
我正在创建一个与instagram功能类似的应用程序，我在发布新照片时遇到了一个问题。当用户发布新照片时，它将保存到此状态。
const [posts, setPosts] = useState([]);
当页面呈现和useeffect运行时，图像不会显示在屏幕上，因为它是异步的，所以我所做的就是添加“post”作为对useEffect的依赖项。这创造了一个无限循环，我认为这是因为它调用自己，但我不确定有任何其他方式来做这件事。这是useEffect代码。
useEffect(() => {
const getPosts = async () => {
cons
浏览 12提问于2022-10-24得票数 0
实际上，我通过单击提交单击按钮并按下数组中名为biodata对象并将数组acc排序到该对象的追随者的编号(在useEffect()中)来处理对象。问题是，直到我在输入框import React from 'react‘import {useState，useEffect}从'react’中做了一些更改，它才会呈现排序的数组
import axios from 'axios';
function Search(){
const [searchkeyword,inputchange] = useState("");
const [biodata,s
浏览 0提问于2020-09-10得票数 0
我正在尝试更深入地学习函数组件的呈现周期。当我通过实验useEffect和useState来测试触发重新渲染的不同场景时，我遇到了一个连续更改状态(实际上，预期的无限循环)不会导致连续触发渲染的示例。 考虑下面或CodeSandbox上的代码示例：https://co5tj.csb.app/ 我真的希望渲染循环进入无限循环，但它并没有。 import "./styles.css";
import React, { useEffect, useState } from "react";
function App() {
const [myText, set
浏览 8提问于2021-04-18得票数 0
我试图在初始运行时运行一个组件，我试图将状态值分派给另一个组件 在运行特定组件的useEffect时，useEffect在运行时不断更新： 每当我从dropdown更改为useEffect并将之前的值设置为state时，我也会有一个下拉列表 const handleChange = (event) => {
console.log("Role changing")
console.log(event.target.value)
setStates(event.target.value);
dispatch(
浏览 41提问于2020-09-04得票数 0
回答已采纳
我从来没有使用钩子的反应，我试图使用useEffect()，但我似乎不了解它的正确结构和使用的基本知识。
我能够用普通的JavaScript实现结果，但是使用useState，状态保持不变。
然后我在搜索了一段时间后找到了useEffect，这就是我能让它看起来-
// Background Parallax Effect
let [translateY,setTranslateY] = useState(0);
useEffect(()=> {
const getScrollPos = ()=> {
setTranslateY(window.scroll
浏览 3提问于2020-06-15得票数 0
回答已采纳
3回答
我编写了一个代码，该代码通过receives接收api，并通过单击时传递id再次在子组件中调用api。但是，在settingState中似乎存在一个问题，即在子组件的useEffect或onClick中使用箭头函数。
如果你能给我一个如何解决它的答案，我将不胜感激。
Users.js
import axios from 'axios';
import React, { useState, useEffect } from 'react';
import UserInfo from './UserInfo';
function Users()
浏览 4提问于2021-08-07得票数 3
回答已采纳
1回答
我有一个useState钩子名字故事。
const [stories, setStories] = useState([
{
name: "1st Story",
sid: 1,
apartmentDetails: [],
},{
name: "2nd Story",
sid: 2,
apartmentDetails: [],
}
]);
现在我想把apartmentDetails添加到第一层中。为了实现此功能，我将执行以下操作。
let story = stories.find((sto
浏览 1提问于2021-05-11得票数 0
回答已采纳
所以我有一个分页和API调用，函数得到所有的项并除以页码，所以它在一个页面上显示了10个条目。
如下所示：
const [totalPages, setTotalPages] = useState(0); //state for pages
const [limit, setLimit] = useState(10); //state for a limit of pages
const [page, setPage] = useState(1); //state for particular page
let pagesArray = getPagesArray(t
浏览 10提问于2022-01-23得票数 0
我想知道使用(或不使用) useEffect更新useLocation之间最大的区别。
我通常会发现，每当useLocation的路径发生变化时，useEffect中的人都会将其设置为更新状态，但我发现我不需要这样做就可以更新位置。
const NavBar = () => {
const location = useLocation();
const [currentPath, setCurrentPath] = useState('')
const location = useLocation();
console.log('pathname
浏览 3提问于2020-12-22得票数 7
回答已采纳
1回答
我正在使用react useEffect从我的后端获取数据，但它不停地向我的终端发送相同的消息。
我的代码
function DataFetching() {
let [posts, setPosts] = useState([]);
useEffect(() => {
axios.get('http://localhost:8080/zoom')
.then(res => {
setPosts(res.data);
})
.
浏览 0提问于2020-05-05得票数 0
2回答
所以我有个定制的钩子。每次我在useEffect中使用返回的国家时，似乎都会执行无限循环。就像useEffect所认为的那样，国家总是在变化，不得不改弦更张。现在，我确实读到了一些关于自定义钩子的内容，在每个重发器上创建数据的一个新实例。这就是它循环的原因。但我想不出怎么解决这个问题。
这是我的代码：
export function useCountries() {
const { data: countryData, isLoading } = useQuery<ICountries, string>(["countries"], () => fetch
浏览 1提问于2022-07-15得票数 1
回答已采纳
因此，每当run() (处于组件的状态)被更改时，我都想调用a。
run()设置另一个状态变量b的值。
import {computeWithB} from '../helpers/compute'
const [a, setA] = useState()
const [b, setB] = useState()
const run = () => {
result = computeWithB(b)
setB(result)
}
useEffect(() => {
run();
}, [a, run]);
浏览 2提问于2020-08-01得票数 0
回答已采纳
我对此反应很新。
我有几个过滤器在我的应用程序，距离和评级。
我想知道显示应用于用户的过滤器的数量。
我使用以下方法创建组件级状态
const [rating, setRating] = useState([])
const [distance, setDistance] = useState(0)
const [filters, setFitlers] = useState([])
异步API调用发生在pageLoad上。
我尝试通过添加过滤器、距离和评级的依赖关系来使用useEffect()：
useEffect(() => {
// distance filter is man
浏览 5提问于2020-09-10得票数 0
回答已采纳
1回答
我创建了一个组件：
const [address, setAddress] = useState({street: 'via roma', number: 2})
const onChangeAddress = (newAddress) => {
setAddress(newAddress)
}
<Address initialAddress={address} onChange={onChangeAddress}/>
地址组件的详细信息：
const Address = (props) => {
const {address, on
浏览 1提问于2022-01-31得票数 1
我通常在我的react应用程序中使用useEffect获取数据。类似于：
function SomeComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) => response.json()).then((json) => setData(json))
}, []);
}
我希望这段代码只在组件挂载时运行，这就是为
浏览 0提问于2021-01-25得票数 1
回答已采纳
1回答
我需要更新从父级传递下来的属性，它会导致无限循环，因为我必须将它包含在useEffect钩子的依赖项列表中。
示例
function componentFoo({bar, setBar}) {
const [baz, setBaz] = useState()
useEffect(()=>{
setBar({...bar,baz:baz})
}, [bar, baz])
useEffect(()=>{
setBaz(123)
}, [])
return <>{bar}</>
浏览 1提问于2020-06-02得票数 1
回答已采纳
1回答
弄清楚如何用钩子来使用redux，但不确定它是否正确。
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getPins } from "../../../actions/pins";
function MainStory() {
const pins = useSelector(state => state.pins.pins);
const di
浏览 3提问于2020-01-03得票数 1
回答已采纳
我的代码中似乎有一个无限循环，但我似乎看不到它的位置，如果我设置的是useEffect的依赖项的状态，但是这里的两个变量(值/项)是完全分开的，我通常会看到这一点。
App.js
import React from 'react';
import './style.css';
import MyComponent from './MyComponent.js';
export default function App() {
return (
<div>
<MyComponent />
&
浏览 10提问于2022-08-29得票数 0
1回答
我有一个下拉组件，其中重要的部分是：
import { useEffect, useState } from "react"
type PropsType = {
options?: any[]
}
export const DropDown = (props: PropsType) => {
const { options = [] } = props;
const [query, setQuery] = useState('');
const [filteredOptions, setFilteredOptio
浏览 4提问于2022-10-17得票数 0
我有以下代码： const [ ddFilterData, setddFilterData ] = useState('');
useEffect(() => {
getDropdownData();
}, [ddFilterData]);
const getDropdownData = async () => {
if(optionDetails) {
let filteredData = Promise.all(
optionDetails.map(async (item, i) => {
浏览 51提问于2020-08-25得票数 0
回答已采纳
使用通过延迟加载的react 17，我根据所选的语言动态加载三个组件中的一个( zustand中的状态变量)。导入取决于该变量：
const MyComponent = lazy(() => import(`component-${language}.jsx`))
在迁移到react 18之后，组件处于无限呈现状态。
我想这与新的自动批处理功能有关。
有人能帮忙吗？诚挚的问候
在组件外部创建一个函数，以从组件接收变量作为支柱或从存储区直接导入变量，但是错误仍然存在。
而不是状态变量，我尝试了一个getter从商店，但没有成功。
尝试使用useState和use
浏览 13提问于2022-03-23得票数 2
我正在尝试使用useEffect钩子重新调用一个基于状态更改的API。但是，我的useEffect无法检测到对“类型”数组所做的更改。我尝试使用use-deep-compare-effect库，但它也无法检测到更改。 如何检测我的状态更改？ 任何帮助都将不胜感激！ const [values, setValues] = useState({
query: '',
type: ["Tender & Auction", "Merger & Acquisition","Policy &
浏览 135提问于2021-11-02得票数 0
回答已采纳
2回答
在下面的两个函数上，我遇到了一个问题，当我检查请求的调试时，GET请求有一个无限循环，我不明白为什么每次我的useEffect都要重新触发。
这是我的代码：
const gardenData = async () => {
setLoading(true);
const user = await AsyncStorage.getItem('user');
const parsedUserData = JSON.parse(user);
try {
const response = await axios.get(
浏览 10提问于2022-04-26得票数 0
1回答
我有一个循环，它将生成一个具有多个数据的Array。我在useEffect中这样做循环：
export const GeneratedProgram: React.FC<{}> = () => {
const askedProgram = getFromLocalStorage("program");
const [program, setProgram] = useState<any>();
useEffect(() => {
if (askedProgram) {
for (let i = 0; i &
浏览 6提问于2022-08-13得票数 0
回答已采纳
在子组件上，我有一个基于某些条件更新本地状态的函数。我想在数据变化时调用该函数，但它会导致一个遵循useEffect准则的无限循环。
const func(val:any,arr:any[]){
...
setArr(arr)
}
useEffect(() => {
val && val.length > 0 && func(val,arr)
},[val,func,arr])
浏览 7提问于2021-12-07得票数 1
我的学习，反应和我试图调用的戳api，但我有无限的循环，我真的不知道我在做什么。这是我的应用程序
useAxios.ts
import axios from 'axios';
import { useState, useEffect } from 'react';
import Request from '../interfaces/request';
const useAxios = (request: Request) => {
const client = axios.create({
baseURL: &#
浏览 1提问于2022-11-15得票数 0
回答已采纳
1回答
我在我的应用程序上收到一条警告信息，我尝试了很多东西来删除它，但没有成功。错误信息：
React useEffect缺少一个依赖项：“updateUserData”。要么包含它，要么删除依赖数组react/react。
我不想用评论来排除这个问题，但是我想用一种“最佳实践”的方式来解决这个问题。
我想调用该更新函数并更新我的组件，以便在其他组件中共享该上下文。
所以..。我做错什么了？(任何关于其他代码的评审都非常欢迎！)
多谢百万！
如果我添加[]作为useEffect的第二个参数，就会得到警告，然后删除它，就会得到一个不确定的循环。
同时，添加updateuserData会得到一个无限
浏览 0提问于2019-09-30得票数 2
回答已采纳
3回答
当我在React中将数组分配给useEffect钩子中的一个状态时，我有一个无限循环，我不知道为什么要将状态series作为依赖项添加。
const [series, setSeries] = useState([]);
useEffect(() => {
setSeries([1, 2, 3, 4]);
}, [series]);
具有字符串的相同代码不会创建无限循环
const [series, setSeries] = useState([]);
useEffect(() => {
setSeries('No Infinite Loop');
}, [
浏览 3提问于2020-06-02得票数 2
回答已采纳
有一个奇怪的问题，我正在从我的本地api获取一些数据，它出于一些奇怪的原因无限地调用它： import React, { useState, useEffect } from 'react';
const Users = () => {
const [users, setUsers] = useState([])
const fetchUsers = async () => {
try {
await fetch('http://localhost:3001/users')
浏览 25提问于2021-04-03得票数 1
回答已采纳
我在useEffect中获取数据，并在数据到达时更新本地状态。但是如果我不把依赖数组传递给useEffect，状态就会更新，但它会运行无限循环。另一方面，如果我将依赖数组作为空或有状态传递，那么它不会更新状态(即，数据不会从我的axios请求中设置到本地状态变量中)。
const [availableCars, setAvailableCars] = useState([]);
useEffect(() => {
postRequest(formData, headers).then((data) => {
console.log('Vehicles Resp
浏览 3提问于2020-07-01得票数 0
如果我按照它让我做的那样在依赖数组中添加依赖数组"fitems“，那么它将导致无限循环。另外，如果我没有在数组上使用扩展操作符，那么警告就不会显示，但是状态的改变不会重新出现。
Sidebar.tsx
import { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import axios from "axios";
import getItems from "./../services/Sideb
浏览 0提问于2021-02-04得票数 1
回答已采纳
import {useState, useEffect } from 'react'
import axios from 'axios'
const Singlecountry = ({searchedCountries, setWeather, weather}) => {
const weatherName = searchedCountries[0].capital
const iconname = () => {
if (weather === undefined) {
return null
}
浏览 5提问于2022-05-10得票数 0
2回答
你好，我有这个组件，在阅读了一些之后，我发现当数组中的数据发生变化时，再次调用useEffect，但在我的示例中，这不是更改，而是进入循环。
export default function Test() {
const [dates, setDates] = useState([]);
let values = [];
useEffect(() => {
getAllFilledJournauxDates().then(function(response) {
values = response;
setDates(values);
浏览 9提问于2022-06-28得票数 1
回答已采纳
1回答
我有两个正在使用的API数据。我试图将数据映射为列表项。我还试图使用productCode作为匹配点来映射正确项目的正确徽标。我怎样才能做到这一点？我已经把我的密码附在下面。每个项目必须有徽标、金额和productCode。如果有更好的方法合并这两个API，我很乐意知道.
export default function App() {
const [Alldata, setAlldata] = useState([]);
useEffect(() => {
// GET request using fetch inside useEffect React hook
浏览 1提问于2022-05-04得票数 0
回答已采纳
我正在使用FullCalendar进行反应，我正在与状态作斗争...它返回以下消息：
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我删除了代码中所有不必要的部分。
import React, { useState, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin
浏览 0提问于2021-03-21得票数 0
对不起，reactjs初学者，下面有两个代码，我不明白为什么当我使用“第一段代码”时，我得到无限循环(在浏览器控制台中无限注销'123‘)，当我使用“第二个代码”时，我没有无限循环(在浏览器控制台中只注销两个'123’)，为什么当我用“第一个代码”获得无限循环时，为什么不使用“第二个代码”来获得无限循环呢？
(第一段代码)导致无限循环：
[Parent.js]
const randomFunc = (dataFromChildComponent) => {
setData(dataFromChildComponent);
};
[Child.js]
useEffec
浏览 2提问于2021-07-31得票数 0
回答已采纳
我有一个相当复杂的，它让我很难提供世博会小吃之类的东西，所以我尽我最大的努力解释我面临的问题：
这个应用程序的一个特点是，我有一个虚拟数据数组，用户可以通过这些数据查询，将其添加到他最喜欢的列表中。通过使用Autocomplete文本输入组件，用户可以通过单击列表中的选项向列表中添加一个新的最爱。然后应该显示这个新的收藏项。
收藏夹列表存储在redux存储区中，并使用useEffect钩子每分钟更新一次(出于样式原因)。
我面临的问题是，我需要将最喜欢的列表状态添加到useEffect钩子的依赖项中。但是，在这样做时，我的应用程序没有启动，这似乎是由无限循环造成的(尽管我没有收到任何警告或错误
浏览 4提问于2020-04-03得票数 0
我有mutliSelect，我的例子是:当值支柱是时，也设置我的useState []。
我试着写这样的东西：
const [selected, setSelected] = useState([]);
useEffect(() => {
setSelected([]);
}, [Value]);
<Select
style={style}
maxTagCount={0}
maxTagPlaceholder={maxTagPlaceholder}
mode="multiple"
placeholder={placeholder}
sh
浏览 4提问于2022-01-26得票数 0
当我从api中获取一个项目列表时，我遇到了这个问题。axios在操作中发出get请求。发送到减速机，并作出改变的状态。因此，我希望只有当用户添加、删除或更新项目时，列表才会更新。我使用传递列表的useEffect钩子作为依赖项进行更改，但它只是在无限循环中获取，极大地影响了性能。
行动创建者：
import axios from "axios";
const BASE_URL = "https://localhost:5001/api";
export function getList() {
return (dispacth) => {
r
浏览 1提问于2022-02-22得票数 0
回答已采纳
React.useEffect (() => {
if (rows.length === 0) {
async function fetchMyApi() {
const url = `https://reqres.in/api/users?page=2`;
let res = await fetch(url);
res = await res.json();
if (res) {
setRows (res.data);
浏览 2提问于2020-07-27得票数 1
1回答
我试图将这个基于类的react组件更改为一个函数组件，但我在设置引用时遇到了一个无限循环问题，我认为这是因为在每次呈现时，ref都是一个新对象。
如何将基于类的组件转换为功能组件
index-class.js -
class Collapse extends React.Component {
constructor(props) {
super(props);
this.state = {
showContent: false,
height: "0px",
myRef: null,
};
}
com
浏览 2提问于2021-06-06得票数 0
1回答
太多的重新渲染。React限制呈现的数量，以防止无限循环。当我放置这些行时，它会向许多重发者显示错误。我已经用箭头函数包装了onClick和onSubmit函数，即使这样也会显示错误。
if(fields){
setFormFields({
company: !loading && !fields.company ? "" : fields.company,
})
}
在useEffect下面的代码中提到了这些行。
import React, { useState, useEffect } from "react&
浏览 5提问于2020-07-23得票数 0
回答已采纳
我有一个从页面调用的carousel组件，但它直到我刷新页面才会显示。如果我有Box组件，并切换到Carousel组件，它不会工作，直到我刷新页面，但如果我首先呈现Carousel组件，渲染Box，然后返回到Carousel，它可以工作。这是ReactDOM的bug还是什么？
我的旋转木马组件：
const Carousel = () => {
const { carousel, setCarousel } = useContext(AppContext);
useEffect(() => {
setCarousel(true);
return () =&
浏览 8提问于2021-01-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
