React useEffect无限循环
React useEffect是React中的一个钩子函数，用于处理副作用操作。副作用操作是指在组件渲染过程中，需要执行的与组件状态无关的操作，例如数据获取、订阅事件、手动操作DOM等。
在使用React useEffect时，如果不正确地配置依赖项，可能会导致无限循环的问题。无限循环的原因通常是由于useEffect内部的操作导致了组件状态的更新，从而触发了组件的重新渲染，再次执行useEffect，形成了循环。
解决React useEffect无限循环的方法有以下几种：
- 指定正确的依赖项：在useEffect的第二个参数中传入依赖项数组，确保只有在依赖项发生变化时才执行useEffect内部的操作。如果依赖项数组为空，则表示不依赖任何状态，只在组件挂载和卸载时执行一次。
- 使用函数式更新：如果useEffect内部的操作依赖于组件状态的更新，可以使用函数式更新来避免无限循环。函数式更新可以接收前一个状态作为参数，并返回新的状态值，确保每次更新都是基于前一个状态进行的。
- 使用useRef跳过首次渲染：可以使用useRef来跳过组件的首次渲染，避免无限循环。通过在useEffect内部使用ref.current来判断是否是首次渲染，从而决定是否执行副作用操作。
- 使用条件判断：在useEffect内部使用条件判断，根据特定条件来决定是否执行副作用操作。可以使用if语句或者三元表达式来进行条件判断，确保只在满足条件时执行副作用操作。
总结起来，解决React useEffect无限循环的关键是正确配置依赖项，并确保副作用操作不会触发组件状态的更新。如果仍然存在无限循环的问题，可以通过函数式更新、useRef跳过首次渲染或者条件判断来进行处理。
腾讯云相关产品和产品介绍链接地址：
相关·内容
const [resourceType, setResourceType] = useState("posts");
const [data, setData] = useState("");
useEffect(() => {
console.log("use effects called: " + resourceType);
fetch(`https://jsonplaceholder.typicode.com/${resourceType}`)
.then((result) => {
浏览 6提问于2022-04-10得票数 1
回答已采纳
我正在使用react chartjs2来显示折线图。海图数据在useEffect中不断更新。该图表显示了数据。一切都很顺利。但我得到了这个钩子排气排气规则警告： 第51行: React钩子useEffect缺少依赖项：'chartData‘。包括它或删除依赖数组react-hooks/exhaustive deps 但是如果我添加了状态chartData，页面就会冻结，因为我认为它会进入无限循环。数据可能会持续调用。代码是： const [chartData, setChartData] = useState({
labels: [],
datasets:[]
}
浏览 16提问于2020-11-05得票数 0
我有以下钩子：
const useBar = () => {
const [myFoo, setFoo] = useState(0);
const [myBar, setBar] = useState(0);
useEffect(() => {
setFoo(myFoo + 1);
console.log("setting foo (1)", myFoo, myBar);
}, [setFoo, myFoo, myBar]);
useEffect(() => {
setBar(myBar + 1);
cons
浏览 12提问于2019-07-18得票数 6
回答已采纳
在使用Redux进行AJAX调用之后，我正在尝试呈现这个CardsContainerCopy组件。
如果将useEffect中的依赖项数组保留为空，则组件根本不会呈现。
如果我将cartItems添加到依赖项数组中，组件将呈现，但fetchItems函数一直被无限调用。
代码：
import React, { useEffect, useState } from "react";
import SingleCard from "./SingleCard";
import { createServer } from "miragejs";
impo
浏览 2提问于2022-05-31得票数 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
我有这个口袋妖怪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
回答已采纳
具有以下代码： import React, { useState, useEffect } from 'react';
function UseEffectComp1() {
const [count, setCount] = useState(0);
const [mounted, setMounted] = useState(false);
useEffect(() => {
if (mounted)
setMounted(false);
else
s
浏览 8提问于2020-08-24得票数 0
回答已采纳
import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
function AppTwo(props){
const [state, setState] = React.useState("initial value");
useEffect(() => {
console.log(`useE
浏览 7提问于2022-01-17得票数 1
回答已采纳
import { useEffect, useState } from "react";
function CountSecrets() {
const [secret, setSecret] = useState({ value: "", countSecrets: 0 });
useEffect(() => {
if (secret.value === 'secret') {
setSecret(s => ({...s, countSecrets: s.countSecrets + 1}));
浏览 3提问于2021-03-29得票数 0
回答已采纳
const fetchUsers = async () => {
const result = await axios.get(
`http://localhost:3001/get_users/per_page/10/page_number/0`
);
setUsers([...users, ...result.data.users]);
setListUsersQueryState("complete");
};
useEffect(() => {
fetchUsers();
}, []);
浏览 10提问于2019-08-13得票数 0
2回答
我想将响应的数据存储到数组中以供重用。我要用Axios来做这个。我收到的问题是，当我推入数组时，它会循环getBoroughAndId()并继续推到数组中。我可以判断，因为我得到了一个console.log()响应，它总是告诉我我提出了太多的请求。有什么建议吗？谢谢。
编辑:在进行了另一个测试之后，我认为问题是在运行getBoroughAndId时，id总是在改变。我不知道该怎么阻止这一切。
import React, { useEffect, useState } from 'react';
import { airtableApi } from '../servic
浏览 3提问于2020-12-21得票数 1
回答已采纳
2回答
下面的useEffect呈现、获取数据并显示一次(对useEffect中的第二个参数使用空数组)。
每当用户将数据更改为数据库时(当用户使用useEffect时)，我需要它重新运行axios.post。
我试过的
使用票证的setTicketstrying ，但这只会导致useEffect无限地运行(也使用tickets.length和票证)，使用道具作为参数，但没有找到任何有用的
import React, { useState, createContext, useEffect } from "react";
import axios from "axios"
浏览 4提问于2020-04-28得票数 0
有一个奇怪的问题，我正在从我的本地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
回答已采纳
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
1回答
UseEffect一次又一次地调用我的api。但是，如果保持不变，用一个简单的console.log替换axios调用，那么UseEffect只完成一次。我只包括导航栏上的一个链接，因为这是创建问题所需的全部内容。
这是我的路由器：
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Navbar, Nav} from 'react-bootstrap';
import Home from './Home.js';
im
浏览 1提问于2021-07-01得票数 1
回答已采纳
我是react的新手，并且是第一次使用useEffect。我收到了丢失依赖的警告，但这个应用程序工作得很好。如何解决警告问题？或者可以忽略这个警告？ useEffect(() => {
setValid(true);
}, []}; 我收到警告: React Hook缺少依赖项：‘useEffect’。
浏览 16提问于2021-04-21得票数 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
回答已采纳
我已经创建了一个音乐播放器，作为我正在进行的项目的一部分，但是我有这个错误。有人有解决办法吗？
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
回答已采纳
似乎是调用映射到状态的todoList导致了这个问题，但是我不知道why...how我是否在没有这个错误的情况下让我的状态下的待办事项数组显示在表中？ import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { getTodos } from '../../actions/todo';
//Bootstrap Table
import BootstrapTable from 'react-boot
浏览 51提问于2020-10-21得票数 2
回答已采纳
一般来说，我对响应钩子非常陌生，对useSelector和useDispatch在react-redux中也非常陌生，但是在加载组件时，我执行简单的get请求时遇到了困难。我希望get只发生一次(当组件最初加载时)。我以为我知道如何做到这一点，但我遇到了一个ESLint问题，使我无法做我理解为法律代码的事情。
我有一个钩子，我试图抽象我的州代码：
export const useState = () => {
const dispatch = useDispatch();
const data = useSelector((state) => state.data);
浏览 0提问于2019-06-17得票数 2
我刚开始学习React (没有后端，有上下文API)。在上下文提供者中，我正在寻找一种方法来从相同的数据中设置两个Hook状态。进行一次axios调用(无需重新渲染)。提供者接收App。有什么解决方案吗？ export const Context = React.createContext();
const MoviesProvider = ({ children }) => {
console.log("Context Affectations");
const [movies, setMovies] = React.useState(null);
c
浏览 26提问于2021-04-02得票数 0
回答已采纳
import React, { useState, useEffect } from "react";
import "./Date.css";
import "./Home.css";
export default function Date(props) {
const [dateState, setDateState] = useState(new Date());
useEffect(() => {
setInterval(() => setDateState(new Date()), 30000);
浏览 5提问于2022-02-10得票数 -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
回答已采纳
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
回答已采纳
所以我有一个分页和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
我在玩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
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
这可能与我的问题有关，但我尝试使用答案，但没有运气。这就像我的react组件在设置钩子setShow(！show)时启动了一个无限循环(应用程序挂起)： 这里有一个沙箱，显示了问题：https://codesandbox.io/s/collapse-gmqpp import React, { useState, useEffect } from "react";
const CrawlJobs = () => {
const [mediaList, setMediaList] = useState([]);
const [show, setShow] = us
浏览 15提问于2020-01-22得票数 0
回答已采纳
在useEffect和useCallback中使用react时，我修复了一个无限循环。
const fetchApi =useCallback(()=>{
setIsLoading(true)
fetchDataFunction({
resolve(res) {
setFetchData(fromJS(res))
setIsLoading(false)
}
})
},[param])
useEffect(()=>{
fetchApi()
},[fetchApi])
这会导
浏览 0提问于2020-02-20得票数 1
我正在使用FullCalendar进行反应，我正在与状态作斗争...它返回以下消息：
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我删除了代码中所有不必要的部分。
import React, { useState, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin
浏览 0提问于2021-03-21得票数 0
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
回答已采纳
下面是我的组件函数： function RosterRows(props){
const [rosterList,setRosterList]=useState({});
const getData=async ()=>{
let roster=new Roster();
let rosterData=await roster.get(props.rosterYear,props.rosterMonth);
setRosterList(rosterData);
}
useEffect(()=>{
浏览 105提问于2020-12-01得票数 1
回答已采纳
3回答
我编写了一个像这样的react js组件：
import Auth from "third-party-auth-handler";
import { AuthContext } from "../providers/AuthProvider";
export default function MyComponent() {
const { setAuth } = useContext(AuthContext);
useEffect(() => {
Auth.isCurrentUserAuthenticated()
.the
浏览 4提问于2021-07-04得票数 3
我刚开始学习React Hooks，所以我还是个新手。
我正在努力找出为什么下面的代码会陷入无限循环。
我找不到代码有任何问题。
有没有人能解决这个问题？
import React, { useEffect, useState } from "react";
import axios from "axios";
export interface Post {
userId: number;
id: number;
title: string;
body: string;
}
function PostFetchingOne() {
con
浏览 0提问于2021-09-30得票数 0
PostList组件，当我添加createCFommonent时，会得到太多的重呈现错误。React限制呈现的数量，以防止无限循环。
import React,{useState,useEffect} from 'react';
import axios from 'axios'
import './PostList.css'
import CommentCreate from './CommentCreate';
const PostList = () => {
const [ptitle,setPtitle]=
浏览 1提问于2020-10-05得票数 0
1回答
我正在尝试使用THIRDWEB从不同的合同中获取所有nfts。首先，我从sanity获取契约地址(这非常好)，然后我尝试获取nfts (您使用useNFTCollection钩子，然后使用函数getOwned)。
尽管我接收到的数组(dataArray)，我可以看到它的元素(所有的NFT)，但我不能访问数组中的任何元素(它总是返回未定义的)，也不能访问数组的长度。
然而，如果我试图获取这个数组的长度，它只返回未定义的值。
守则：
import React, { useState, useEffect } from "react";
import Header from
浏览 5提问于2022-09-16得票数 1
1回答
我正在使用authentication登录/注册，并使用firebase auth进行身份验证。当用户登录时，我希望在根路径或App组件上重定向用户。但是我进入了一个无限循环，这给了我这个错误(通过节流导航来防止浏览器挂起)。
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import App from "./App&
浏览 1提问于2019-06-19得票数 4
回答已采纳
我有一个名为Sidebar.jsx的react组件。在它中，我进行了一个API调用，以获得一个车队数组，以填充我的Sidebar中最终的JSX下拉元素。这将产生一个简单的JSON数组。
我从我的服务文件夹中导入了一个名为getFleets()的函数来进行API调用。该服务使用fetch API对我的后端进行查询调用，如下所示：
export async function getFleets() {
const resp = await fetch("http://localhost:5000/fleets", {
method: 'GET'
浏览 1提问于2022-06-01得票数 0
回答已采纳
1回答
我有一个简单的部分，其中包含一个光滑的滑块，我想点击一个按钮，如按钮1，它应该打开一个特定的幻灯片。
以下是代码箱上的现场演示
这是js代码
import React, { useRef, useState, useEffect } from "react";
import Slider from "react-slick";
export default function APP() {
const sliderRef = useRef();
const [slideIndex, setSlideIndex] = useState(0);
va
浏览 11提问于2021-04-28得票数 0
回答已采纳
根据下面的代码，每当inView为true时，我都需要调用一个函数，但是使用useEffect和useCallback列出依赖项时，我会导致无限循环。我设法避免它的唯一方法是不列出依赖项，但我得到了一个警告，我必须列出它们。我只尝试了useEffect，但结果是一样的，列出了依赖项，我在循环中遇到了问题。代码如下： import { useEffect, useCallback } from "react";
import { useInView } from "react-intersection-observer";
export const useLa
浏览 45提问于2020-09-28得票数 1
回答已采纳
1回答
大家早上好,
我刚刚完成了我的反应训练，我想做一个项目来练习。首先，我只是在一个防火墙数据库中发布数据。然后，我希望使用钩子(useState和useEffect)获取数据，以便在react组件中显示它。
问题是，在用axios获取数据之后，我最终陷入了无限循环的经典陷阱中，但我想不出如何用依赖来阻止它。
请查找以下代码：
import React, {useState} from 'react'
import {useEffect} from 'react'
import classes from './Incomes.module.css'
浏览 2提问于2020-10-16得票数 0
回答已采纳
在react中使用数组作为useEffect()钩子中的依赖项。
const [productCategories, setproductCategories] = useState([]);
useEffect(() => {
// set something..
if(categories){
const filtered = categories.filter((c)=>c.available);
setproductCategories(filtered);
}
}, [categories]);
在这里，类别已经是一
浏览 1提问于2021-06-02得票数 0
有人能帮我摆脱这个警告吗？
React useEffect缺少一个依赖项：“调度”。要么包含它，要么删除依赖数组react/react。
这是我的密码
函数寄存器(Props){ const inusers=useSelector( (state) => {返回状态})；const history=useHistory() const dispatch=useDispatch ()；// const formik = useFormikContext()；useEffect( ) => {调度(fetchUser()) }，[]
浏览 6提问于2021-10-19得票数 7
实际上，我通过单击提交单击按钮并按下数组中名为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
1回答
我只在我的应用程序中的一个地方使用useEffect()，如下所示：
useEffect(() => {
document.body.addEventListener('click', bodyClicked);
return () => {
document.body.removeEventListener('click', bodyClicked);
};
}, [bodyClicked]);
function bodyClicked() {
dispatch({type: 'to
浏览 6提问于2022-02-22得票数 1
我使用的效果挂钩，并希望确认这个实现是正确的。我没有收到任何警告在控制台，但我想知道为什么这不是一个无限循环？
React.useEffect(() => {
setSelections(inputUPC, false);
//console.log(props.uncheckCard);
props.setUncheckCard(false);
}, [props.uncheckCard]);
浏览 1提问于2022-05-23得票数 2
有人能给出这个警告信息的解决方案吗？
137:7警告“slider1”数组使useEffect Hook (第143行)的依赖项在每次呈现上发生变化。为了解决这个问题，将'slider1‘的初始化包装在它自己的useMemo() Hook react钩子/详尽-deps 138:7中，警告'slider2’数组使useEffect Hook (第143行)的依赖项在每次呈现上发生变化。要解决这个问题，请将'slider2‘的初始化封装在它自己的useMemo() Hook react钩子/详尽-deps中。
我是个新手，对此没有经验。如果有人能提供完整的解决方案，那
浏览 2提问于2021-10-14得票数 9
回答已采纳
我需要一些关于树组件之间通信的建议，以及为什么我的解决方案创建一个无限重呈现循环。
ProductFilters：保存其所有子级状态的父级，并最终使用onChange prop公开它。上面的组件应该知道所有过滤器的状态。
ColorFilter：一个颜色选择器，使用onChange prop通知父母
SizeFilter：一个大小选择器，取决于使用颜色道具的ColorFilter值，通知使用onChange prop的父级
我准备了一个简单的模式来说明这一点：
但是这个设计有一个错误，那就是无限重呈现循环。我做错了什么，错过了什么？管理这种常见情况的通常“方
浏览 3提问于2022-10-07得票数 0
我已经创建了一个基本的反应性组件作为沙箱。我向组件中添加了一个doSomething()函数，它只是在useEffect()上显示一个警告。但是，警报在无限循环中被调用。所以很明显，这个设计有问题。知道这个导致无限循环的组件的设计问题是什么吗？为了解决这个问题，您建议重新设计这个组件的步骤是什么？
import {Repository} from '../data/Repository';
import { useEffect , useState} from 'react';
import { useSelector, useDispatch } from &
浏览 2提问于2022-06-24得票数 -2
1回答
我有以下内容：
import React, { useState, useEffect } from "react";
const App = () => {
const [data, setData] = useState<null | any[]>(null);
const [checked, setChecked] = useState(false);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoadi
浏览 4提问于2020-07-30得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
