无限循环- React原生useState useEffect
无限循环是指在React中使用原生的useState和useEffect钩子时可能出现的一个问题。当在useEffect中使用了某个状态的值，并且在useEffect中更新了该状态的值时，可能会导致无限循环的情况发生。
具体来说，当在useEffect中更新了某个状态的值时，React会重新渲染组件，并再次执行useEffect。如果在useEffect中再次更新了该状态的值，又会触发组件的重新渲染和useEffect的执行，从而形成了一个无限循环。
这种无限循环的情况可能会导致性能问题，并且可能会导致页面卡死或崩溃。为了避免这种情况，我们可以使用一些方法来解决无限循环问题。
解决无限循环问题的方法有以下几种：
- 使用useEffect的第二个参数：可以通过给useEffect传递第二个参数来指定依赖项数组。只有当依赖项发生变化时，才会触发useEffect的执行。如果依赖项数组为空，useEffect只会在组件挂载和卸载时执行一次。通过正确设置依赖项数组，可以避免无限循环的问题。
- 使用函数式更新：在useState中，可以使用函数式更新来更新状态的值。函数式更新接受一个回调函数，该回调函数的参数是当前状态的值，返回值是新的状态的值。使用函数式更新可以避免无限循环的问题，因为它保证了在更新状态时使用的是最新的状态值。
- 使用useRef：可以使用useRef创建一个可变的引用，并在useEffect中使用它来保存上一次的状态值。这样，在useEffect中可以比较当前状态值和上一次的状态值，只有当它们不相同时才执行相应的逻辑，从而避免无限循环的问题。
总结起来，无限循环是在React中使用原生的useState和useEffect钩子时可能出现的一个问题。为了避免无限循环，可以使用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
回答已采纳
我有以下钩子：
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
回答已采纳
具有以下代码： 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
回答已采纳
我已经创建了一个音乐播放器，作为我正在进行的项目的一部分，但是我有这个错误。有人有解决办法吗？
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
回答已采纳
2回答
我想将响应的数据存储到数组中以供重用。我要用Axios来做这个。我收到的问题是，当我推入数组时，它会循环getBoroughAndId()并继续推到数组中。我可以判断，因为我得到了一个console.log()响应，它总是告诉我我提出了太多的请求。有什么建议吗？谢谢。
编辑:在进行了另一个测试之后，我认为问题是在运行getBoroughAndId时，id总是在改变。我不知道该怎么阻止这一切。
import React, { useEffect, useState } from 'react';
import { airtableApi } from '../servic
浏览 3提问于2020-12-21得票数 1
回答已采纳
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
回答已采纳
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
回答已采纳
我的代码中似乎有一个无限循环，但我似乎看不到它的位置，如果我设置的是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
在使用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
回答已采纳
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应用程序，它有一些问题，首先，当我获取口袋妖怪，它不断添加无限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
回答已采纳
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
回答已采纳
一般来说，我对响应钩子非常陌生，对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 chartjs2来显示折线图。海图数据在useEffect中不断更新。该图表显示了数据。一切都很顺利。但我得到了这个钩子排气排气规则警告： 第51行: React钩子useEffect缺少依赖项：'chartData‘。包括它或删除依赖数组react-hooks/exhaustive deps 但是如果我添加了状态chartData，页面就会冻结，因为我认为它会进入无限循环。数据可能会持续调用。代码是： const [chartData, setChartData] = useState({
labels: [],
datasets:[]
}
浏览 16提问于2020-11-05得票数 0
似乎是调用映射到状态的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
回答已采纳
这可能与我的问题有关，但我尝试使用答案，但没有运气。这就像我的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
回答已采纳
有一个奇怪的问题，我正在从我的本地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
回答已采纳
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
回答已采纳
我刚开始学习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回答
我创建了一个组件：
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
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 (没有后端，有上下文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
回答已采纳
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
回答已采纳
我在玩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
我需要一些关于树组件之间通信的建议，以及为什么我的解决方案创建一个无限重呈现循环。
ProductFilters：保存其所有子级状态的父级，并最终使用onChange prop公开它。上面的组件应该知道所有过滤器的状态。
ColorFilter：一个颜色选择器，使用onChange prop通知父母
SizeFilter：一个大小选择器，取决于使用颜色道具的ColorFilter值，通知使用onChange prop的父级
我准备了一个简单的模式来说明这一点：
但是这个设计有一个错误，那就是无限重呈现循环。我做错了什么，错过了什么？管理这种常见情况的通常“方
浏览 3提问于2022-10-07得票数 0
3回答
这段代码将无限运行，但无论删除useValue(object)或useTest()都会停止无限运行。这整件事对我来说没什么意义，有人能解释一下吗？
import React from "react";
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
// this code can also stop the infinite loop
// const [object] = use
浏览 1提问于2020-11-28得票数 0
下面是我的组件函数： 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
回答已采纳
所以我有一个分页和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
我是不是做错了什么？我正在尝试获取一些数据，但它在我的控制台日志中返回错误，说明有关重新渲染 我的组件内容： const Link = (props) => {
const { state, scrape } = useContext(ScrapeContext);
const [clipboard, setClipboard] = useState('');
const [googleClip, setGoogleClip] = useState(false);
const [googleLink, setGoogleLink] = useState(
浏览 47提问于2020-01-11得票数 0
我通常在我的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
回答已采纳
我正在使用FullCalendar进行反应，我正在与状态作斗争...它返回以下消息：
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我删除了代码中所有不必要的部分。
import React, { useState, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin
浏览 0提问于2021-03-21得票数 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
实际上，我通过单击提交单击按钮并按下数组中名为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回答
大家早上好,
我刚刚完成了我的反应训练，我想做一个项目来练习。首先，我只是在一个防火墙数据库中发布数据。然后，我希望使用钩子(useState和useEffect)获取数据，以便在react组件中显示它。
问题是，在用axios获取数据之后，我最终陷入了无限循环的经典陷阱中，但我想不出如何用依赖来阻止它。
请查找以下代码：
import React, {useState} from 'react'
import {useEffect} from 'react'
import classes from './Incomes.module.css'
浏览 2提问于2020-10-16得票数 0
回答已采纳
1回答
我正在尝试生成一个CustomHook，它接收一个负责执行查询的函数。CustomHook应该执行查询并返回它。
问题：当我更改参数时，它在第一次单击时没有反映在组件中。尝试将带有参数的对象放在useEffect中，它将永远循环。
预期：从前面更改参数，并通过useEffect或通过执行函数自动更改参数，再次使用新的参数存储在钩子中。
(参数必须是数组，它是我想要重用的函数)
实际
App.js
import { useState } from "react";
import "./styles.css";
import useFetch from "
浏览 1提问于2022-06-01得票数 0
回答已采纳
1回答
当我从单个useEffect调用API时，它工作得很好。但是，当我试图从同一个组件中的另一个useEffect调用另一个API时，它会显示一个。
如果可能的话，请看一下我在上的项目。
import React, { useEffect, useState } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
const TeacherDashboard = () => {
// console.log(props)
const [appointment
浏览 2提问于2020-06-05得票数 1
回答已采纳
1回答
我的数字游戏有问题。
场景
在完成应用程序崩溃后没有在屏幕上显示游戏，在找到正确的号码后，
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import Header from './Components/Header';
import StartGameScreen from './screens/StartGameScreen';
import GameScreen from './sc
浏览 3提问于2019-11-20得票数 2
回答已采纳
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
回答已采纳
1回答
我比较新的反应钩子，我试图创建这个自定义钩子来处理我的API的CRUD操作。
这是钩子文件：
import React, { useState, useEffect } from "react";
const useApi = (url, headers = { method: "GET" }, payload = null) => {
const [isLoading, setIsLoading] = useState(true);
const [apiData, setApiData] = useState(null);
const
浏览 2提问于2021-09-08得票数 0
回答已采纳
看起来react-query很流行，所以我尝试将react-query添加到我现有的代码中。
下面的代码是exist代码。它使用钩子(useEffect & useState)、axios并返回响应数据。
import { useState, useEffect } from 'react';
import { apiProvider } from 'services/modules/provider';
import { useLoading } from 'components/Loading/Loading';
export c
浏览 1提问于2021-05-18得票数 0
我有一个函数rentDrone()在点击时运行，通过上下文，其中的所有内容都在工作，其他两个状态正在UI中更新和更新，但我的站点列表不是
//React Imports
import React, { FC, useEffect, useState } from "react";
import { Col, Container, Row } from "react-bootstrap";
import _ from "lodash";
//Self Imports
import { RentalPane } from "../../com
浏览 1提问于2021-06-15得票数 0
我最近已经开始使用react本机，我正在使用世博构建这个移动应用程序。我正在使用useEffect()来调用其中的一个函数。我只想在显示结果(在本例中是connectionName变量)之前，等待API的响应完全完成。我将useEffect()函数wallets作为第二个参数，因为每当wallets更改时，都希望再次获取wallets，但我似乎在无限循环中运行，尽管wallets没有更改。任何帮助都是非常感谢的。
export default function LinksScreen() {
const [wallets, setWallets] = React.useStat
浏览 4提问于2020-03-22得票数 0
回答已采纳
我已经创建了一个基本的反应性组件作为沙箱。我向组件中添加了一个doSomething()函数，它只是在useEffect()上显示一个警告。但是，警报在无限循环中被调用。所以很明显，这个设计有问题。知道这个导致无限循环的组件的设计问题是什么吗？为了解决这个问题，您建议重新设计这个组件的步骤是什么？
import {Repository} from '../data/Repository';
import { useEffect , useState} from 'react';
import { useSelector, useDispatch } from &
浏览 2提问于2022-06-24得票数 -2
我理解，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回答
我有一个简单的部分，其中包含一个光滑的滑块，我想点击一个按钮，如按钮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
回答已采纳
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
2回答
我已经疯了一个小时了，试图找出他的错误“警告:不能在呈现另一个组件(App)的同时更新组件(Nav)。
import React, {useState, useEffect} from 'react'
import React, {useState, useEffect} from 'react'
import './App.css';
import Cart from './pages/cart'
import Home from './pages/home'
import Drawings from '
浏览 2提问于2022-06-12得票数 0
回答已采纳
因此，我正在尝试创建一个将在我setParams上传递的函数，以便我可以通过onPress在我的导航器中执行该函数中的任何内容。 这是我的EditProductsScreen： import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, StyleSheet, TextInput, ScrollView } from 'react-native';
import { useSelector } from 'react-redux';
浏览 65提问于2020-08-12得票数 0
回答已采纳
我的学习，反应和我试图调用的戳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
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
