React useState无限循环
是指在使用React的函数组件中，使用useState钩子来管理组件的状态时，可能会出现状态更新导致组件重新渲染的循环问题。
当在useState中传入一个函数作为初始状态，并且该函数的返回值依赖于组件的其他状态或属性时，就有可能出现无限循环的情况。这是因为每次组件重新渲染时，useState都会调用初始状态函数来获取最新的状态值，而该函数又依赖于其他状态或属性，导致状态更新又触发了组件的重新渲染，从而陷入无限循环。
为了解决这个问题，可以采取以下几种方法：
- 将初始状态函数的依赖项提取到组件外部，确保每次渲染时都是相同的函数引用。例如，可以使用useCallback钩子来缓存函数引用。
- 使用useEffect钩子来处理初始状态函数的依赖项，并在依赖项变化时更新状态。通过在useEffect中监听依赖项的变化，并在变化时更新状态，可以避免无限循环的问题。
- 如果初始状态函数的返回值不依赖于其他状态或属性，可以直接传递初始状态的值，而不是传递一个函数。
需要注意的是，以上方法适用于解决useState无限循环的一般情况。在实际开发中，还需要根据具体的业务场景和组件结构来选择合适的解决方案。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云容器服务（TKE）、腾讯云函数计算（SCF）
- 腾讯云云服务器（CVM）：提供弹性计算能力，可快速创建和管理云服务器实例，满足各类业务需求。产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云容器服务（TKE）：基于Kubernetes的容器服务，提供高度可扩展的容器化应用管理平台，简化容器集群的创建、部署和运维。产品介绍链接：https://cloud.tencent.com/product/tke
- 腾讯云函数计算（SCF）：无服务器计算服务，支持按需运行代码，无需关心服务器管理，实现弹性、高可用的函数计算能力。产品介绍链接：https://cloud.tencent.com/product/scf
相关·内容
我有以下钩子：
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
回答已采纳
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
回答已采纳
我有这个口袋妖怪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
回答已采纳
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
回答已采纳
2回答
我想将响应的数据存储到数组中以供重用。我要用Axios来做这个。我收到的问题是，当我推入数组时，它会循环getBoroughAndId()并继续推到数组中。我可以判断，因为我得到了一个console.log()响应，它总是告诉我我提出了太多的请求。有什么建议吗？谢谢。
编辑:在进行了另一个测试之后，我认为问题是在运行getBoroughAndId时，id总是在改变。我不知道该怎么阻止这一切。
import React, { useEffect, useState } from 'react';
import { airtableApi } from '../servic
浏览 3提问于2020-12-21得票数 1
回答已采纳
我是React的新手，我正在尝试学习React函数组件状态。我想知道为什么我们需要做onClick={() => setCount(count + 1)}而不是onClick={setCount(count + 1)}
import React, {useState} from 'react';
function Counter() {
const [count , setCount] = useState(0);
return (
<div>
<button onClick={setCount(
浏览 0提问于2019-12-23得票数 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
回答已采纳
我将给你们两个版本的一个组件，我写的。为什么第一个循环给我无限的循环，而第二个循环工作得很好？
我孤立了这个问题，但我想知道为什么逻辑不遵循“罩下”的逻辑。毫无疑问，一些来自useState的黑魔法
//THROWS INFINTE LOOP ERROR
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Popover, PopoverHeader, PopoverBody } from 'reactstrap';
impo
浏览 6提问于2020-06-12得票数 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
似乎是调用映射到状态的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
一旦我向"setTitle“添加了一个对象，我就会得到一个错误。在"useState()“中设置对象是可行的。
import React, { useState } from "react";
export default function App() {
const [title, setTitle] = useState({});
setTitle({
"somthing": "dfgsf"
});
return <p>df</p>;
}
太多的重新呈现。React限制呈现的数
浏览 1提问于2020-12-21得票数 2
回答已采纳
//我在控制台上得到了一个无限的console.log()。有帮助吗?为什么？ import React, {useState} from "react";
const App = ()=>{
let [state, setState] = useState([])
fetch("https://jsonplaceholder.typicode.com/users")
.then(result => result.json())
.then(data => setState(data))
co
浏览 21提问于2020-10-18得票数 1
这可能与我的问题有关，但我尝试使用答案，但没有运气。这就像我的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
回答已采纳
1回答
我有一个组件，一个接一个打印10个数字。我也有一个按钮Clean，它必须删除这10个数字时，它被点击。我不知道如何实施。
import { useState } from 'react'
export default function Timeout() {
const [message, setMessage] = useState([1])
const Markup = (
<ul>
{message?.map((n) => (
<li>{n}</li>
))}
&l
浏览 1提问于2022-05-19得票数 1
回答已采纳
有一个奇怪的问题，我正在从我的本地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
回答已采纳
在使用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
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
回答已采纳
我刚开始学习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
1回答
我有一个带有expo client的react本机应用程序，并给出了一个太多的重新呈现错误，我将发布这些文件，注意我使用react-native-paper.。
这是App.js，它是应用程序的包装器。
import React from "react";
import { Provider as PaperProvider, DefaultTheme } from "react-native-paper";
import { StatusBar } from "expo-status-bar";
import Homescreen from &
浏览 1提问于2020-09-30得票数 0
回答已采纳
我正在使用react chartjs2来显示折线图。海图数据在useEffect中不断更新。该图表显示了数据。一切都很顺利。但我得到了这个钩子排气排气规则警告： 第51行: React钩子useEffect缺少依赖项：'chartData‘。包括它或删除依赖数组react-hooks/exhaustive deps 但是如果我添加了状态chartData，页面就会冻结，因为我认为它会进入无限循环。数据可能会持续调用。代码是： const [chartData, setChartData] = useState({
labels: [],
datasets:[]
}
浏览 16提问于2020-11-05得票数 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
回答已采纳
3回答
我在useInterval钩子上有以下问题，如果它点击计数20，我会尝试使计数器停止，但是我目前实现它的方式似乎会导致无限循环的呈现。到目前为止，我的代码如下：
import React, { ChangeEvent, useState } from "react";
import { useInterval } from "usehooks-ts";
export default function Component() {
// The counter
const [count, setCount] = useState<numbe
浏览 14提问于2022-03-07得票数 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
回答已采纳
我正在尝试构建一个react组件，它显示一个基于API响应的随机数。但是我注意到显示的数字是无限重呈现的，当我检查服务器控制台时，它会收到来自react的无限请求。如何解决这个问题？我使用react状态来显示数字。
API randomnumber.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {
let randomNumber = Ma
浏览 4提问于2022-10-31得票数 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
2回答
我使用了React本机下拉选取器来显示项目列表，但选取器似乎对任何点击都没有响应 下面是我写的完整代码： import React, {useEffect, useState} from 'react';
import {
View,
ScrollView,
ActivityIndicator,
Text,
TouchableOpacity,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
imp
浏览 12提问于2020-12-07得票数 0
回答已采纳
1回答
node_modules/whatwg-fetch/dist/fetch.umd.js:535:17的网络请求在本地代码处的setTimeout$argument_0中失败:在callFunctionReturnFlushedQueue中为null
const [email, setEmail] = React.useState('')
const [pass, setPass] = React.useState('')
const [login, setLogin] = React.useState({
email1: 'bilal',
浏览 3提问于2021-03-17得票数 0
当我从父组件(Post)使用usePost hook调用setPost时，为什么这会导致无限的重新渲染器？是什么导致了这个错误？ function Post({ activePostId }) {
const { status, post, setPost, error, refetch } = usePost(activePostId)
const [savePost, savePostStatus] = useSavePost()
setPost('SetPost')
const onSubmit = async (values) => {
浏览 23提问于2021-05-08得票数 0
回答已采纳
我有一个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
回答已采纳
我在这段代码中有一个无限循环，但是我不知道为什么，
import React, { useEffect, useState } from 'react';
import VideoCardComponent from './VideoCard';
import Grid from '@mui/material/Grid';
import { connect } from 'react-redux';
import { getVideos } from '../redux/actions/videosActions&
浏览 0提问于2021-11-23得票数 0
我有反应元件
import React, {useState} from 'react';
function App() {
const [number, setNumber] = useState(12);
return (
<>
<h1>Number value is: {number}</h1>
<div className="btn btn-success" onClick = {() => setNumber(number + 1)}>Add</div&
浏览 5提问于2021-03-12得票数 0
回答已采纳
在我的代码中，我正在开发一个mern应用程序，我已经创建了许多组件，并使用了react状态钩子和反应性上下文api钩子来管理通过应用程序的数据流，但是在一个已经存在多个状态的组件中，我创建了一个新的状态，它显示了错误，我的新的状态代码被附加了。
const [a, seta] = useState("garg");
seta("naman");
我的应用程序在显示许多警告后停止，警告1:-
at renderWithHooks (react-dom.development.js:14997)
at mountIndeterminateCom
浏览 1提问于2021-11-21得票数 1
回答已采纳
我正在使用FullCalendar进行反应，我正在与状态作斗争...它返回以下消息：
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我删除了代码中所有不必要的部分。
import React, { useState, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin
浏览 0提问于2021-03-21得票数 0
我想更好地理解为什么在下面直接调用的函数中更新状态会导致函数在无限循环中运行。 我知道如果我想在挂载后立即更新状态，我应该使用"useEffect“，但我想知道为什么会发生这个无限循环背后的机制。 我尝试删除更新状态的函数调用，可以看到它不再在无限循环中运行。 import React, { useState } from "react";
const App = () => {
const [tasks, setTasks] = useState();
const getSheetData = text => {
setTasks(te
浏览 24提问于2019-09-08得票数 0
我正在使用React和Django rest Api构建一个ToDoList，但我也在使用Datepicker来呈现创建日期当天的所有任务。但每次站点加载时，api都会被调用数千次。我们的目标将是，当日期改变或添加当天的新任务时，只呈现特定日期的任务，而不是不断地调用后端来解决问题，因为在其他情况下，props.date只被调用一次，而不是在循环中。 import React, { useState } from 'react'
import 'date-fns'
import Grid from '@material-ui/core/Grid'
浏览 28提问于2021-04-12得票数 1
回答已采纳
1回答
我正在尝试使用THIRDWEB从不同的合同中获取所有nfts。首先，我从sanity获取契约地址(这非常好)，然后我尝试获取nfts (您使用useNFTCollection钩子，然后使用函数getOwned)。
尽管我接收到的数组(dataArray)，我可以看到它的元素(所有的NFT)，但我不能访问数组中的任何元素(它总是返回未定义的)，也不能访问数组的长度。
然而，如果我试图获取这个数组的长度，它只返回未定义的值。
守则：
import React, { useState, useEffect } from "react";
import Header from
浏览 5提问于2022-09-16得票数 1
2回答
我试图使用从父组件获得的道具更新组件的状态，但我得到了以下错误消息：
太多的重新呈现。React限制呈现的数量，以防止无限循环。
如果支柱发生变化，我希望本地状态更新。类似的帖子(，，)并没有为我修正。
import React, {useState} from "react"
const HomeWorld = (props) => {
const [planetData, setPlanetData] = useState([]);
if(props.Selected === true){
setPlanetData(props.
浏览 4提问于2019-09-24得票数 5
回答已采纳
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
回答已采纳
TL;DR:我正在尝试使用新的react-hooks api，但是在调用setState钩子时我一直得到一个不变的违规错误，但是它一直失败。
import React, { useState } from 'react';
// type State = {
// heading: string;
// }
const Text = () => {
const initialState = 'Heading'.toUpperCase();
const [heading, setHeading] = useState(initialStat
浏览 0提问于2018-12-04得票数 6
回答已采纳
我有一个名为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
回答已采纳
当我使用setMiddle(true)时，它会出现一个错误“太多的重呈现.”
你能告诉我为什么吗？
import React, { useState } from "react";
const App = () => {
const [ test, setTest ] = useState(true)
const [ test1, setTest1 ] = useState(false)
const [ middle, setMiddle ] = useState(false)
const setFrame = () => {
conso
浏览 5提问于2020-06-18得票数 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
新的反应。我正在尝试将设置并保存在一个Function函数中。当我使用以下代码时，会得到以下错误：
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。
我怎样才能修正我的代码，这样就不会发生这种情况？我把它从一个类转换成一个函数，这样我就可以使用钩子了。
import React, {useEffect, useState} from 'react';
import MUIDataTable from "mui-datatables";
浏览 1提问于2021-03-12得票数 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
回答已采纳
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
回答已采纳
我使用Ionic React并使用插件加载本地数据。我只调用该函数一次，但它被调用了很多次 Main.jsx import React ,{useState} from 'react';
import {
IonApp,
IonHeader,
IonTitle,
IonToolbar,
IonContent,
IonInput,
IonList,
IonItem,
IonLabel,
IonButton
} from '@ionic/react';
import 'cap
浏览 18提问于2020-10-19得票数 1
回答已采纳
是否有人可以查看以下ReactJS组件并指出是什么导致它返回错误：
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
import React, { useState, useEffect } from 'react';
function Lab() {
const [questions, setQuestions] = useState([]);
const addQuestion = (question) => {
浏览 2提问于2020-09-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
