错误:重新渲染过多。react限制渲染次数以防止无限循环
。
这个错误通常发生在React组件中，当组件的状态或属性发生变化时，React会重新渲染组件。然而，如果在渲染过程中又触发了状态或属性的变化，就可能导致无限循环的渲染，最终导致浏览器崩溃或页面卡死。
为了防止这种情况发生，React引入了一些机制来限制渲染次数。其中最常见的是使用shouldComponentUpdate或React.memo来优化组件的渲染。
shouldComponentUpdate是一个生命周期方法，用于控制组件是否需要重新渲染。在该方法中，可以根据新旧状态或属性的比较结果，决定是否进行渲染。通过合理地使用shouldComponentUpdate，可以避免不必要的渲染，提高性能。
React.memo是一个高阶组件，用于包装函数组件。它会对组件的输入进行浅比较，如果输入没有变化，则会使用之前的渲染结果，避免重新渲染。这对于那些具有稳定输入的组件非常有用。
除了上述方法外，还可以使用React的Context API来避免不必要的渲染。Context可以将数据在组件树中传递，而不需要通过中间组件进行传递。这样可以避免中间组件的重新渲染，提高性能。
在实际开发中，可以根据具体情况选择适合的优化方法。如果组件的渲染开销较大，可以考虑使用shouldComponentUpdate或React.memo进行优化。如果组件之间存在多层嵌套，可以考虑使用Context来避免不必要的渲染。
腾讯云提供了一系列与云计算相关的产品，包括云服务器、云数据库、云存储等。这些产品可以帮助开发者快速搭建和部署应用，提供稳定可靠的基础设施支持。具体产品介绍和链接地址如下：
- 云服务器（CVM）：提供弹性计算能力，支持多种操作系统和实例类型。链接：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：提供高可用、可扩展的关系型数据库服务。链接：https://cloud.tencent.com/product/cdb_mysql
- 云对象存储（COS）：提供安全可靠的对象存储服务，适用于图片、视频、文档等各种类型的文件存储。链接：https://cloud.tencent.com/product/cos
以上是腾讯云提供的一些与云计算相关的产品，可以根据具体需求选择适合的产品来支持应用的开发和部署。
相关·内容
1回答
将变量设置为相同值时的无限重呈现
、、、、
我使用了一个React本机功能组件，如下所示：
export const Component1 = () => {
const [var1, setVar1] = useState(false);
setVar1(false);
return (
<View...>
)
}
这是一个无限循环，但是当我移除setVar1(false)时，它就没有了。我假设如果我继续将var1重新设置为相同的false值，组件就不会重新呈现。我该怎么防止这个重渲染？
浏览 6提问于2022-10-11得票数 3
让我们看一下下面的代码
import React from "react"
export default function App() {
const [isGoingOut, setGoingOut] = React.useState(false);
function yeet() {
setGoingOut(prevValue => prevValue ? false : true);
}
return (
<div className="state"&
浏览 0提问于2021-12-01得票数 2
有人能帮帮我吗？基本上，我正在为学校的一个项目使用React和Typescript，突然，这个错误发生了，我不明白为什么……我试着用一个布尔状态和一个简单的Work[]来解决这个问题，这两个状态总是会出现相同的错误:太多的重新渲染，我不知道为什么。感谢救了我的仁慈的灵魂，我感谢你 这是我的组件 export default function WorkList(props :any) {
const id = props.id
const [works, setWorks] = useState<Work[]>()
useEffect(()=> {
浏览 34提问于2021-08-20得票数 0
3回答
我正在做一些事情，我的一段代码有点慢，我认为发生的情况是组件无缘无故地重新渲染了太多次。有没有办法检查一个组件在react(或react-native )中重新渲染了多少次？我尝试做的是在render方法后放置一个console.log，并计算有多少个，但我不确定这是否有效。提前感谢！
浏览 6提问于2019-02-07得票数 9
回答已采纳
我已经在react中创建了一个带有标签的Slider。当用户移动Slider时，下面的数字会突出显示，我通过给出number类实现了这一点。 <span
className={scaleHighlightClass[index]}
key={index}
ref={scaleElement}
onClick={() => handleClickOnScale(index)}
> scaleHighlightClass数组使用钩子，如下所示： const [scaleHighlightClass, setScaleHighlightClass] = u
浏览 23提问于2021-09-17得票数 1
回答已采纳
当我从父组件(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
回答已采纳
我正在开发一个ReactJS网络应用程序。我对正在工作的代码进行了更改，现在我得到了一个错误：
Error: Minified React error #301
我可以恢复代码，使它再次工作，但我不知道我做错了什么，以得到这个错误。
注意:我最后补充的是：
const [openDialog, setOpenDialog] = useState(false);
所以也许我不能用这个。
React有错误代码和解释列表吗？
寻找答案：
搜索了React error codes and explanations。没什么能帮上忙的。
浏览 3提问于2019-10-30得票数 4
回答已采纳
我目前正在一个预订座位的网站上工作。我希望向其添加一个事件侦听器，以便当它被单击时，它可以调用将存储div值的函数。但是，每当我在网站的整个内容中添加onClick事件时，都不会显示(只显示一个空白页面)。我的密码有什么问题吗？而且，我对此反应很新，如果可能的话，你们能解释一下你们的答案吗.？
这是我的密码
import React, { useState } from "react";
const Ticketing = () => {
const [seat1, selectSeat1] = useState();
const [seat2,
浏览 3提问于2022-08-27得票数 1
WITH recursive T1(USER_NAME,ID, PARENT_ID, LVL, ROOT_ID, PATH) AS (
-- ANCHOR MEMBER.
SELECT USR_NM,USR_NO,
MNGR_EMPLY_NBR PARENT_ID,
1 AS LVL,
USR_NO AS ROOT_ID,
TO_CHAR(FRST_NM || ' ' || LST_NM) AS PATH
FROM EMPLOYEE
UNION ALL
-- RECURSIVE MEMBER.
SELECT T2.USR
浏览 6提问于2022-03-04得票数 0
2回答
我想要一些帮助，请理解为什么下面的代码导致inf呈现循环。在我看来，这应该是一个循环：
渲染容器。
渲染子StrRow。
第一次运行效果并调用update()。
更改容器状态。
重新渲染容器。
重新渲染StrRow.
由于依赖项没有更改，不会再次运行。
然而，这种效果似乎是在StrRow的每次呈现之后运行的。
function Container() {
const [count, setCount] = React.useState(0);
const update = React.useCallback(() => {
浏览 3提问于2020-05-06得票数 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
回答已采纳
1回答
我有一张这样的桌子：
|id |name |parent|
+-------+----------+------+
|1 |iran | |
|2 |iraq | |
|3 |tehran |1 |
|4 |tehran |3 |
|5 |Vaiasr St |4 |
|6 |Fars |1 |
|7 |shiraz |6 |
是关于从一个国家到另一个街道的地址。我想通过递归cte创建地址，如下所示：
浏览 2提问于2022-11-20得票数 -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回答
使用Node.js / Express，我定义了一个路径，传入一个请求和响应。 我总是希望在命中此路径时包含种子url参数，因此我将种子查询参数设置为0并重定向url。 我接下来要做的是对每个请求/响应随机化该参数，并基于另一个url参数(在本例中为random=true )的附加内容来更新url。 默认路由应类似于localhost:3000/default?seed=0 如果使用random=true参数，则路由可能类似于localhost:3000/default?seed=456&random=true，其中种子在每次请求时都会更新。 我的代码(使用express、canva
浏览 14提问于2019-10-17得票数 0
app.get('/',function (req,res) {
client.getAllOffers(null,function(err, resp) {
if (!err) {
offer = JSON.parse(resp);
test1 = offer.allOffersList.length;
res.send(offer);
for(var i=0;i<test1;i++) {
var stmt = "
浏览 0提问于2018-04-14得票数 0
我是服务器端的新手。
我想要恢复我被杀死的节点js服务器，这是由于一些错误发生的。
我一直在寻找，但我想利用新公司，任何帮助都是感激的。
浏览 0提问于2017-09-22得票数 0
在进行任何操作之前，我都在清理控制台中的警告，并且有一组组件是非常相似的(结构化的)。这些值是特定于每个组件的。似乎试图在if语句中设置State并不是一个好主意。
原解决方案，并重新声明：
const [value, setValue] = React.useState({
quoteId: false,
quotePage: false,
quoteExcerpt: false,
quoteComment: false,
});
var allEmpty = true;
if (
value.quoteId &&
浏览 3提问于2021-06-25得票数 1
回答已采纳
2回答
我正在从一个网站获取一些数据，需要浏览很多页面-有时他找不到选择器，一段时间后- TimeoutError和程序停止。
当程序遇到该错误或任何错误时，我希望自动重新启动程序。
我一直在尝试，但如果我在程序出现错误后手动关闭它，它就会重新启动。
浏览 2提问于2019-01-21得票数 0
3回答
如果之前有人问过这个问题，我很抱歉，但我找不到与我的情况相匹配的正确答案。
我有一些批处理文件，它们总是在运行，因为java程序在里面运行。然而，有时它们会崩溃，因为我没有监控它们，所以需要一段时间才能重新启动它们。
我想问一下，有没有一种方法可以监控这些批处理文件，或者即使它们崩溃了，我如何重新启动这些批处理文件。我正在Windows XP上运行这些文件。
谢谢
浏览 0提问于2012-02-17得票数 1
1回答
File "/home/abhigenie92/stanford2/Code/dependencies.py", line 18, in get_dependencies
result = loads(server.parse(sentence));
File "/home/abhigenie92/stanford-corenlp-python/jsonrpc.py", line 934, in __call__
return self.__req(self.__name, args, kwargs)
File "/home/
浏览 1提问于2015-09-13得票数 0
当我试图通过我的应用程序上的登录表单更改状态时，它给出一个错误消息： Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 我不知道我在哪里引起了无限循环。下面是发生问题的app.js： class App extend
浏览 87提问于2020-10-14得票数 0
我定义： const countryCode = "ca"; 。。 const [countryKode, setCountryKode] = useState("") 。。 setCountryKode(countryCode)
console.log(countryKode) ???? Should it display the value???? 。。 return (
<div className={classes.root}>
<h1> Country Code: {country
浏览 15提问于2020-07-03得票数 0
3回答
我刚开始反应...
此代码仅在3秒后使用布尔值呈现。
但是下面的代码一直在渲染..渲染..正在渲染...几乎每三秒一次。
import React, { useState } from "react";
const App = () => {
const [isLoading, setIsLoading] = useState(true);
setTimeout(() => {
setIsLoading(!isLoading);
}, 3000);
return <h1>{isLoading ? "Loading&#
浏览 32提问于2021-02-19得票数 0
回答已采纳
以下是代码：
import React, { useState } from 'react'
function App() {
const [a, setA] = useState(1)
setA(2)
return (
<div>
<h1>{a}</h1>
</div>
);
}
误差太多的重新渲染。React限制呈现的数量，以防止无限循环。
为什么它会导致无限循环？
我认为原因是函数组件就像呈现函数一样，所以当setState在render函数中时会导致无限循环。
有官方解释吗？
浏览 10提问于2020-02-20得票数 5
回答已采纳
我有这个错误，我以前没有这个错误：不变冲突:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
此错误位于:在连接中(在LoginForm.js:75)
render() {
const { inputStyle, containerStylePass, containerStyleIdent, barStyle, textInputStyle } = styles;
return (
<View>
<View&g
浏览 0提问于2018-05-21得票数 12
回答已采纳
1回答
我正在从getCount函数的孩子那里得到道具。把它设为州。而不是把它设置在组件中，得到无穷大的循环。我怎么才能解决呢？
有父组件的代码：
import React, { Component } from "react";
import Message from "./Message/Message";
export default class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {
color: {
浏览 0提问于2018-06-26得票数 0
回答已采纳
正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。 import React, {useEffect, useState} from 'react';
function App() {
return (
<div>
<Main></Main>
</div>
);
}
export default App;
function Main() {
const [count
浏览 38提问于2020-04-29得票数 1
1回答
import React from 'react';
class App extends React.Component{
constructor(){
super()
this.state = {
count: 0
}
this.clicked = this.clicked.bind(this)
}
clicked(){
this.setState(prevState =>{
return {
count : prevState.count+1
}
})
浏览 6提问于2019-11-26得票数 0
回答已采纳
2回答
我编写了一个简单的React来测试React如何呈现
import ReactDOM from 'react-dom';
import React, { useState, useEffect } from 'react';
const App = (props) => {
// State
const [trackIndex, setTrackIndex] = useState(1);
const [trackProgress, setTrackProgress] = useState(0);
const clickHandler =
浏览 7提问于2021-11-24得票数 0
这是我的代码。我想在列表的顶部添加一个新的费用项目。我希望得到一些帮助，告诉我如何在列表的顶端创建新的费用。我一直得到相同的错误:太多的重新渲染。React限制渲染的次数，以防止无限循环。我该如何解决这个问题呢？
import React, { useState } from "react";
import { Text, View, ScrollView } from "react-native";
import NewExpense from "../NewExpense";
import {
selectTitle,
selectP
浏览 1提问于2021-09-06得票数 0
1回答
我正在尝试使用一个自定义钩子来调用获取数据的API。然后我尝试在我的上下文API中调用这个钩子。问题是钩子的主体被渲染了6次。因此，当我尝试使用自定义钩子(UseFetchData)返回的数据在上下文文件中进行setState时，我得到了错误- " error : Too - many - renders . React限制呈现的次数以防止无限循环“。我认为某些状态更改会导致它重新呈现。 context.js import React, { useState, createContext } from "react";
import useFetchData from
浏览 32提问于2020-08-19得票数 0
1回答
所以我试着把一些道具从一个孩子送到另一个家长，并得到了这个错误。我正在尝试从子组件发送回调函数到父函数，并在子组件中调用该函数。我以前用过这个，但是这次我得到了这个错误。
这是我的父组件。
import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import SideDrawer from './SideDrawer';
class Header extends React.Component {
state={
drawer
浏览 3提问于2020-02-10得票数 1
回答已采纳
在我的代码中，我正在开发一个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
回答已采纳
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
回答已采纳
我的错误越来越严重了。太多的重新渲染。
我想做什么？
单击按钮时，调用开始函数并打开模式弹出。一旦开始功能完成，我必须关闭模式弹出。
下面是密码，
enum CheckStatus {
INITIAL,
STARTING,
STARTED,
FINISHED,
FAILED,
}
const useSomeHook = (id) => {
const [status, setStatus] = React.useState(CheckStatus.INITIAL);
const start = React.useCall
浏览 9提问于2021-12-31得票数 0
3回答
我的代码： import Item from './Item_att.js';
import axios from 'axios';
const Attraction_list = () => {
...
const [maindata, setMainData] = useState([]); //setData
const [postsPerPage] = useState(6);
...
let attList = async (areaCode, cityCode) => { //approach openAPI
const u
浏览 43提问于2021-10-13得票数 0
2回答
我已经开始阅读Hooks文档，并意识到一些事情。当我直接使用useState()返回的函数时，如下所示： const [count, setCount] = useState(0);
.
.
.
<button onClick={setCount(count + 1)}>+1</button> React无限地重新渲染，并给出最大堆叠达到的误差。这一切为什么要发生？有人能给我详细解释一下吗？
浏览 25提问于2020-08-12得票数 0
回答已采纳
2回答
我试图让我的组件在道具改变时重新渲染和获取新数据，但我不能让它工作。
export default class InfoTagEditor extends React.PureComponent<Props, State> {
componentDidUpdate() {
$.get('/webapi/getData?componentId=' + this.props.id, function (data) {
this.setState({value: data});
this.initCo
浏览 0提问于2019-05-08得票数 0
因此，我使用React从使用papaparse的CSV中提取新冠肺炎数据。然后我过滤这个数组，只显示今天的结果。我使用的是一个函数式react组件，如下所示： import React, { Component, useState, useEffect } from 'react';
import Papa from 'papaparse'
import dataJSON from './data/CovidLocations.json'
import {Tooltip, Circle } from "react-leaflet"
浏览 17提问于2020-04-03得票数 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
2回答
在JSX中使用以下替代方法(这里使用React Hooks )调用函数有什么不同。对于函数equals const equals = () => {
//Actual code instructs things to do here
} 替代方案： <button id="equals" onClick={() => equals()}>=</button> 和 <button id="equals" onClick={equals}>=</button> 和 <button id=&
浏览 27提问于2019-12-12得票数 3
回答已采纳
2回答
import React, { useState, useEffect } from 'react';
const Test = () => {
const [ count, setCount ] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count up!</button>
<ChildComponent />
浏览 11提问于2019-12-19得票数 0
我尝试使用react钩子而不是基于类的组件，但在性能方面遇到了一些问题。 代码： import React, { memo, useCallback, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
let counter = -1;
function useToggle(initialValue) {
const [toggleValue, setToggleValue] = useState(initialValue
浏览 34提问于2019-02-14得票数 1
回答已采纳
在VB.net中，while循环允许的最大执行次数是多少？这意味着，它正在检查一个变量是否等于某个值，但该值永远不会出现？在退出之前，它将执行代码多少次？有没有什么方法可以设置最大执行次数而不通过编程终止它？
谢谢你的帮助。
浏览 0提问于2009-08-13得票数 1
回答已采纳
我很难理解react重新渲染。如果发生状态更改并计划重新呈现，是否仅在运行组件所有代码后才进行重新呈现？
class App extends Component {
state = {
result:[],
isLoading:true,
isActive:"",
currentPage:1,
}
render(){
return(
<div>
<Child1/>
<Chil
浏览 4提问于2019-03-29得票数 2
#上下文--如果你想直截了当的话跳过
我一直在用Python构建一个相当复杂的web应用程序( been /gevent/MongoDB)。这是一个RSVP系统，它允许几个独立的前端实例，包括注册表单als，以及具有粒度用户权限的后端访问(这些用户是我们的客户端)。现在我需要实现一个灵活的地图减少引擎来收集注册数据的统计数据。一个一刀切的解决方案是不可能的，因为收集的数据因地制宜。我也想为我们的技术倾向更高的客户保持开放。
#上下文结束
因此，我需要执行通过web接口输入的任意字符串代码(某种即席插件语言并不重要)。我已经了解到，要正确地沙箱化Python几乎是不可能的，所以这是没有选择的。
浏览 2提问于2015-01-08得票数 1
回答已采纳
3回答
这是负责获取数据和更新列表的代码：
import {createSlice} from "@reduxjs/toolkit";
import axios from "axios";
const initialState = {
log: []
}
let page = 1;
const cartSlice = createSlice({
name: 'cart',
initialState: initialState,
reducers: {
fetching: (state, payload
浏览 6提问于2022-06-06得票数 1
我有一个嵌套的数组，我在页面上重复这个数组。通过查看页面，我想要在屏幕上显示的所有内容都被渲染了，但是在控制台中我得到了错误：
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
我假设这个错误是由于我拥有的嵌套数组的数量造成的，因为一旦我使我的嵌套数组的大小变小，错误就不会出现。
浏览 0提问于2014-11-04得票数 1
回答已采纳
1回答
调用随机失败的外部API
、、、
我正在使用Django服务器调用韩国政府的天气API来检索大约1800个地点的天气数据。 但是，此天气API在大多数情况下会导致超时。我试着让他们休息一下。例如，对于每个请求，它将休眠0.8秒，在每30个请求之后，它将休眠30秒。但对于1800个请求，这并不能很好地工作。在某种程度上，它是成功的。所有其他时候，它都以失败告终。 在这种情况下，我还应该做些什么来确保在一小时内完成1800个请求？有没有办法让它从之前失败的地方重新启动请求序列？ 对于那些对这段代码很好奇的人，我把它贴在下面： import requests
import pytz
import json
import time
浏览 9提问于2020-11-06得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
