如何在不陷入无限重渲染的情况下更新componentDidUpdate()中组件的状态？
在不陷入无限重渲染的情况下更新componentDidUpdate()中组件的状态，可以通过在componentDidUpdate()生命周期方法中添加条件判断来避免无限重渲染的问题。
首先，需要在componentDidUpdate()方法中获取前一次的props和state，可以通过使用this.props和this.state来获取。然后，与当前的props和state进行比较，判断是否需要更新组件的状态。
以下是一个示例代码：
componentDidUpdate(prevProps, prevState) {
// 判断条件，例如只有当props中的某个特定值发生变化时才更新状态
if (this.props.specialValue !== prevProps.specialValue) {
// 更新组件的状态
this.setState({ updated: true });
}
}在上述示例中，只有当props中的specialValue发生变化时，才会更新组件的状态。这样可以避免在其他情况下无限重渲染的问题。
需要注意的是，如果在componentDidUpdate()中更新状态，必须要有一个条件判断来避免无限重渲染。否则，每次更新状态都会触发componentDidUpdate()方法，导致无限循环。
关于腾讯云相关产品和产品介绍链接地址，可以根据具体的需求选择适合的产品。腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等。可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多产品信息。
相关·内容
2回答
在函数完成后，我尝试设置状态，并得到了错误：
Uncaught Invariant Violation: 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.
在函数完成后，我在回调中调用setstate，所以我认为从我所读到的内容来
浏览 3提问于2019-10-17得票数 2
回答已采纳
我正在从db中删除一条记录，为此我调用了一个API。当我收到一个成功删除的API响应时，我需要像reload一样重新渲染所有组件。我在this.forceUpdate和shouldComponentAgain上试过了，但是没有成功。
我也尝试过componentDidUpdate，它可以工作，但它调用API的次数是无限的。下面是我使用componentDidUpdate的代码
componentDidUpdate(){
let newThis = this;
getAccounts().then(function(response){
if(response.status===
浏览 0提问于2018-11-30得票数 0
在我的应用程序中，我使用了的回调来设置呈现后的新状态。当我升级到16.4.2时，Maximum update depth exceeded出现是因为setState。
反应16
setState回调(第二个参数)现在会在componentDidMount / componentDidUpdate之后立即触发，而不是在所有组件呈现之后触发。
使用：
someHandler() {
this.setState({prop1: true}, () => {
this.setState({prop1: false});
});
},
如何在有效的Reac
浏览 0提问于2018-11-08得票数 0
最初有一个图像循环的问题(它杀死了我们的应用程序接口调用)，并意识到我们需要删除componentDidUpdate。现在，当使用React Dev工具检查页面时，我可以看到除img src更新之外的所有内容，包括alt标记。如果没有任何东西被渲染到页面，那么它将正确地渲染信息，但是一旦有一些东西在那里，它就会改变除了图像本身之外的所有东西。 class Img extends Component {
constructor(props) {
super(props)
this.state = {
src: ""
}
}
// com
浏览 17提问于2019-07-01得票数 1
回答已采纳
我刚接触react和react原生，并试图了解React组件的生命周期……我的屏幕上有四个开关。我尝试将开关的当前状态保存为对象(应用的过滤器)，然后将其传递给导航道具的参数，并在导航标题中保存按钮的onPress函数中访问它。 import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, StyleSheet, Switch } from 'react-native';
import { HeaderButtons, Item } from '
浏览 79提问于2020-10-20得票数 0
我想测试componentDidUpdate我尝试传递{...props}而没有定义它，然后componentDidUpdate首先记录一个空对象，然后更新not required，这会记录它们两次，并显示props is not defined如何测试componentDidUpdate而不进入循环。 我的代码 componentDidUpdate(updateRequired) {
console.log(this.props);
if (this.props.updateRequired === true) {
this.anot
浏览 20提问于2019-10-01得票数 2
回答已采纳
我正在做这个所谓的网页，并有几个“瓷砖”安排在一个类似表格的形式。当一个瓷砖被点击并且它是一个图像时，它应该被一个<p>元素替换，当一个瓷砖被点击并且它是一个段落时，它应该被一个<img>替换。但是，没有两个瓷砖可以同时显示<p>元素。
handleClickTile(e) {
const newTarget = e.target
// if (this.state.clickedTarget !== newTarget) {
// const stateClickedTgt = tgt
浏览 1提问于2021-08-12得票数 0
回答已采纳
在实现react应用程序时，我会遇到以下消息。有人有类似的问题吗？
警告:无法对卸载的组件执行响应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消componentWillUnmount方法中的所有订阅和异步任务。在ProductList (at App.js:44)
我的入口页面是ProductList组件。加载条目页面后，如果我在标题中单击LogOut，就会遇到该消息。有人对此有什么建议吗？
所以我给出了几个答案
但是我解决不了，为什么会这样。:(
App.js
import React, { Component } from "react"
浏览 0提问于2018-12-01得票数 5
我有一个JS应用程序，它用来自ASP .NET Core的条目更新引导网格表。
我需要在插入后用新的条目更新网格。我是在componentDidUpdate()的帮助下这样做的，并在那里使用了refreshList()函数，但是我得到了refreshList()函数的无穷大循环。
对于如何在没有那个循环的情况下更新网格，有什么想法吗？
import React, {Component} from 'react';
import {Table, Container} from 'react-bootstrap';
import {Button, Bu
浏览 5提问于2020-05-30得票数 0
回答已采纳
我很难理解react重新渲染。如果发生状态更改并计划重新呈现，是否仅在运行组件所有代码后才进行重新呈现？
class App extends Component {
state = {
result:[],
isLoading:true,
isActive:"",
currentPage:1,
}
render(){
return(
<div>
<Child1/>
<Chil
浏览 4提问于2019-03-29得票数 2
每次发生其他属性更改时，我都需要对状态属性进行更改。
例如：
当counter更改时，我需要对peopleArray进行更新
多个操作更改counter (参见Dispatcher块)
状态：
{
peopleArray: ['Shawn', 'Amanda', 'Jermaine']
foodArray: []
counter: 0
}
调度员：
onAddPeople: (name) => ({ type: 'ADD_PEOPLE', payload: name }) // increment
浏览 5提问于2020-03-17得票数 0
尽管有许多问题的主题是相同的，但我无法回答我的问题。
问题
I have a select dropdown. On click of which, I call an Api which fetches some key values. I consider this set of key value input fields as a component. So each and every time onChange of my select drop-down, I have used lifecycle methods to handle API Calls. Also, I
浏览 11提问于2016-06-21得票数 4
回答已采纳
因此，我有一个由子元素每秒多次更新状态的组件。
为了防止过度渲染，我在其他孩子身上使用shouldComponentUpdate，以确保他们不会重新渲染太多。
更新的状态元素是树的另一个子元素所必需的。
我只希望那个子元素重新渲染，而不是中间的子元素，再次避免过度渲染。
一个人怎么能这么做？
浏览 0提问于2018-07-19得票数 1
回答已采纳
大约一年前，我学习了React和Redux，直到最近才开始深入使用它们。我惊讶地发现，React和Redux都有相当多的变化。
我注意到的第一件事是，我不能再使用componentWillReceiveProps生命周期方法，它告诉我，我需要使用一些奇怪的getDerivedStateFromProps方法，这并不能真正解决我当前的问题。
基本上，我有一个注册函数，dispatches 3 actions - REGISTER_REQUEST，REGISTER_SUCCESS和REGISTER_FAIL.我的userReducer中还有三个标志-- registering，registered
浏览 0提问于2020-06-26得票数 0
回答已采纳
2回答
我在使用带有数组的useState钩子时遇到了问题。我检查了stackoverflow上的各种资源，但无法修复它。 我的基本代码片段如下所示： const [users, setUsers] = useState([]);
function addNewContact(user) {
const newUsers = [...users,user];
console.log(newUsers);
setUsers(newUsers);
} <CardContainer users={users}></CardContainer> cl
浏览 23提问于2021-09-25得票数 0
回答已采纳
我在我的项目中使用Reactjs。如果我有这样的陈述：
state = {
child:menuList
parent1:{
key1:'some value',
key2:'some value'
}
parent2:{
key1:'some value',
key2:'some value'
}
parent3:{
key1:'some value',
key2:'some value'
}
}
浏览 0提问于2018-11-09得票数 0
回答已采纳
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文档中所述，应该谨慎使用此API，因为可以使用更简单的替代方案来实现相同的结果。这就是我所理解和完全同意的。
但是，作为一个独立的API，在某些情况下它应该是强制的。令我困惑的是，即使是文档中提到的这个API的“罕见用例”，也不能令人信服地认为它是唯一需要的。
以第二个用例为例：
此生命周期方法仅用于在呈现新道具之前清除陈旧数据。但我们不能只清除componentDidUpdate中的陈旧数据吗？即使它会触发不必要的重新渲染，在适当的比较将是相等的，这是一个可接受的解决方案，无论它的价值。
componentDidUpdate(prevProps, prevState) {
浏览 3提问于2020-01-17得票数 0
如果我运行这段代码，我会在componentDidMount中得到无限循环，在(prevState !== this.state)中添加If语句也无济于事。
state = {
purchaseable: false,
totalPrice: 0
}
updatePurchaseState = () => ({
purchaseable: true
});
addIngredientHandler = (type) => {
const newPrice = totalPrice + 1
this.setState
浏览 1提问于2018-05-06得票数 1
2回答
我对React有一点陌生，并在下面写了这个代码。下面的组件用于渲染一个故事的时间和日期选择器。时间和日期选择器仅为故事计划出现的那些社交媒体呈现。
class TaleScheduler extends Component {
constructor(props) {
super(props);
this.state = {
returnData: {},
totalNeeded: numberOfChannels(this.props.data)
};
}
setSchedule = (date, channel) => {
浏览 15提问于2017-06-23得票数 3
回答已采纳
好的，让我从这段代码开始，可能看起来很乱，但问题很简单，我认为。
因此，每当我更改下面的'TitleCards‘子组件的父组件中的状态时，子组件中的状态也会更改，但'TitleCards’组件的render方法中的portfolioTotal值不会根据更改后的状态重新计算。我认为这与异步功能有关，但我不确定。
有什么想法吗？我想要的是当子组件中的状态改变时(我可以用开发工具看到它正在改变)，让组件自动用改变后的状态重新渲染/重新计算portfolioTotal。
import "./StockCard.css";
import { IEX } from "
浏览 21提问于2021-06-05得票数 1
回答已采纳
作为一个新的反应，我看到了一个类似的例子，但他们没有得到明确的解释，我不知道如何解决这个问题。我有一个API，新的数据被发布到API中。ComponentDidMount()将首次从API中启动数据。我查看了文档，发现如果添加了新的数据，componentDiUpdate()总是会重新呈现页面。
到目前为止，这是我的代码：
constructor(props){
super(props);
this.state = {
newData: [],
dataApi: this.props.getAllData() //method that is using GET_ALL
浏览 1提问于2019-06-27得票数 3
回答已采纳
我有多个模态注册，并与它有问题。我总共有三个动作。首先是注册按钮，然后激活第一个注册模式，以便在google或facebook上注册，然后在完成模式之后，提供商无法收集的其他信息将与预先填写的输入一起显示。我在渲染应用程序时渲染了两个通道，并且仅在单击注册按钮时才显示它。我需要在完成facebook或google登录后调用componentDidMount，但它是在应用程序首次启动时呈现通道时调用的。按下动作减速键和减速键，改变bool类型的状态，是否显示模式。
class HeaderRegisterButton extends Component {
render() {
浏览 0提问于2017-02-21得票数 7
我没有太多的反应经验，而且我被困住了。当我试图在componentDidUpdate方法中更新我的状态时，我有无限循环错误，所以我添加了shouldComponentUpdate方法-错误消失了，但是我的状态值(currentIncome)仍然是空的。
export class Company extends Component {
constructor() {
super();
this.state={
transactions: [],
currentIncome: ''
}
}
componentDidMoun
浏览 2提问于2020-06-03得票数 1
回答已采纳
2回答
我有错误maximum call stack size exceeded。也许我错误地理解了componentDidUpdate，但不应该只运行一次，而应该运行1000次。怎么修呢？
class App extends Component {
constructor(props) {
super(props);
this.state = {
amount: 0
}
}
updateAmout() {
let number = 0;
this.props.comments.map((comment, index) =>
浏览 6提问于2017-07-10得票数 4
回答已采纳
我对React和Firebase比较陌生。我读过几篇文章，关于处理返回承诺或接受回调的异步函数是多么麻烦，而我所知的让最终输出“正确”显示的方法很少。我正在为我的项目处理许多异步方法。据我所知，进行异步调用以及放置事件侦听器的最佳位置将是在componentDidMount和componentDidUpdate中，因此我有一个非常轻量级的构造函数，呈现方法，并试图在那里抽筋我的大多数异步调用以及放置我的实时数据库侦听器。目前，这些都是我如何编写componentDidMount和componentDidUpdate代码的片段。 async componentDidMount() {
浏览 25提问于2020-06-23得票数 1
我有一个变量"myVar“(不是状态)
const myComponent = () => {
const [myState, setMyState] = useState(true)
const myVar = false
return <button onClick={() => {myVar = true} >Click here</button>
}
如您所知，这样，如果另一个状态发生变化，组件将被重新呈现，然后"myVar“被重新初始化.
下面，我找到了解决办法..。
解决方案1:在组件之外初始化变量(但不在组件范围内
浏览 5提问于2020-10-29得票数 2
回答已采纳
剩馀
return{...state,importGridData:importGridData)
这里，importGridData将redux初始状态内的状态变量分配给状态变量。
组件渲染
const {importGridData} = this.props
this.setState({importGrdData,importGridData)
我正在使用支持将这里的数据放到react组件中，并且我希望将这些数据分配到我的datagrid组件中。
<DataGrid data={this.state.importGrdData}
我无法在render方法中给出setState，那
浏览 1提问于2018-09-10得票数 1
回答已采纳
我正在使用codemirror创建一个组件，但我的代码中似乎有错误，因为当我试图更新我的主组件的状态时，应用程序破坏了浏览器，我的研究指向一个无限循环，至少我在尝试调试时可以看到这一点。
我希望你们中有人能帮我解决这个问题，也许是我的错，谢谢。
我的主要组成部分：
import React, { Component, PropTypes } from 'react';
import Editor from '../editor';
import Preview from '../preview';
class Playground extend
浏览 6提问于2016-08-24得票数 4
回答已采纳
我有这段代码，但它给了我一个无限循环。我怎样才能防止它呢？
或者我需要使用另一种生命周期方法？？
componentDidUpdate(prevProps, prevState) {
if(prevState.input["purpose"] === "TEST" ){
this.setState({input: { ...this.state.input, number: "1"}})
}else if(prevState.input["purpose"] !==
浏览 1提问于2020-12-02得票数 0
我有一个<BlogPost>组件，它可能是一个无状态函数组件，但由于以下原因，它变成了一个类状态组件：
它呈现的blogPost项(以props的形式接收)将图像嵌入到它们的html标记内容中，我使用marked库解析这些内容，并将其呈现为博客文章，在其段落、h1、h2、h3等段落之间显示图像。
事实上，在将post内容呈现给我的客户之前，我需要预先加载这些图像。我认为这是一个UX灾难，如果您开始阅读一个段落，突然它向下移动400 UX，因为正在加载的图像在读取期间已被挂载到DOM中。
所以我更喜欢通过渲染一个<Spinner/>来坚持，直到我的图像准备好为止。这就是为
浏览 0提问于2019-01-15得票数 1
回答已采纳
1回答
我正在建立一个反应js，html和css餐厅评论网站。我需要使子组件RestaurantInput更新兄弟组件餐厅列表。我创建了通过回调将信息传递给应用程序组件(父组件)的处理程序，当RestaurantInput中有输入更改时，处理程序会对其进行更新。然后，应用程序组件通过props将信息传递给RestaurantList组件，该组件将在UI上呈现新的餐厅。不幸的是，新餐厅没有渲染。我不知道我哪里搞错了。有谁能帮上忙吗？
我尝试在本地pc上对从Json导入的餐厅进行控制台日志记录。但它看起来也没有更新。我查看了React js文档，但也没有得到任何明确的答案。很多解决方案都是在后端有合适的J
浏览 22提问于2019-10-31得票数 3
回答已采纳
1回答
我已经决定在我的所有react应用程序中使用Typescript，但由于学习曲线的原因，我遇到了一些问题。我有一个问题，当我点击用户时，它应该在组件上发出get请求，但它一直在继续，这主要是来自dotnet create react redux应用程序的模板的代码，我认为大部分代码都是理所当然的。
import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
imp
浏览 2提问于2021-08-26得票数 0
我有一个连接到父容器的react组件。容器有mapStateToProps。我在容器中有一个控制台日志。道具正在更新。我可以在组件/子组件中看到属性更新。
未调用componentDidUpdate。我不知道在不调用componentDidUpdate的情况下怎么可能调用渲染。但这种情况正在发生。我在我的屏幕上看到组件更新，我有道具console.logged，他们正在更新。但componentDidUpdate并非如此。我觉得我疯了。
以前有没有人经历过这种情况？？
浏览 6提问于2018-08-02得票数 1
1回答
我是新来的。有反应路由器的问题
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
Index.tsx
<PrivateRoute path='/' component={Main} /> //without exact
<Route path='/signin' component={SignIn} />
PrivateRou
浏览 2提问于2020-04-03得票数 1
回答已采纳
当学习钩子发现了这个定义
钩子是一种函数，它允许您从函数组件“挂钩”到响应状态和生命周期特性。
但是哪里都没有提到lifecycle features是什么？
也找不到这个查询的确切答案
浏览 1提问于2021-03-10得票数 0
嗨，我正在尝试使用componentDidUpdate()改变状态，但是我得到了一个无限循环。
componentDidUpdate(prevState) {
if (prevState.selectedOption1 !== this.state.selectedOption1) {
this.setState({ disabled2: false });
}
}
我搞不懂
浏览 7提问于2022-07-14得票数 0
回答已采纳
我有一个具有componentDidMount()方法的组件，它调用一个名为getData()的方法，该方法获取初始数据并设置组件的初始状态。 class LogsSettings extends React.Component {
constructor(props) {
super(props);
this.settingsUrls = [
"/ui/settings/logging"
];
this.state = {
configSettings: {},
formSchema: fo
浏览 14提问于2019-12-11得票数 0
我有一个名为'App‘的父组件，其中一个子组件被称为’NewComp‘，我在子组件中定义了componentDidUpdate()生命周期，而不是在父组件中。
父组件：
class App extends Component {
state = {
count:0,
}
change = () =>{
this.setState({
count:this.state.count+1,
})
}
render() {
return (
<div>
浏览 0提问于2019-01-29得票数 1
回答已采纳
我正在使用React推荐的componentDidMount()方法进行API调用。在组件内部，我有一个<Link>，它用不同的URL参数指向相同的组件。
但是，当我单击<Link>时，componentDidMount()不会被调用，并且我不能使用更新的URL参数进行API调用。
因此，我尝试将API调用放在componentDidUpdate()和componentWillReceiveProps()中。
这会导致堆栈溢出，因为应用程序接口调用设置了触发componentDidUpdate()和componentWillReceiveProps()的状态，这再次使应
浏览 1提问于2018-05-23得票数 1
下面的代码更新，pageName和pageURL在我的Redux为用户和我得到更新，因为用户浏览周围的反应应用。
const { match } = this.props;
if(match.params.type) {
this.props.pageURL(match.url);
this.props.pageName((match.params.type).replace(/-/g, " "));
}
如果我将这段代码放入render() {方法中，一切都可以正常工作，但下面的错误如下：
Warning: Cannot update during an existi
浏览 1提问于2019-04-05得票数 0
回答已采纳
好的，那么： useEffect(() => {
}, [props.lang]); 每次使用props.lang更改时，我应该在useEffect中做些什么来重新渲染组件？
浏览 23提问于2019-09-20得票数 17
回答已采纳
当我的组件挂载时，我调用一个API来通过redux存储中的axios获取人员列表。
componentDidMount() {
this.props.getPeople();
}
基本上，一旦API调用成功，我会用最新的数据更新redux存储中的peopleList状态。
现在，我(通过mapStatetoProps)在这个peopleList上进行映射，以生成我的组件的render()中的人员列表。到目前为止，一切都很好。
但是，每个人卡片都有一个'like‘按钮，该按钮依次执行POST请求，将people对象的isLiked属性更改为'true’(还使所有其他人员对象的
浏览 1提问于2018-09-17得票数 0
这是一个点击游戏，需要你点击每个图像一次，而不是点击两次。我的问题是重置游戏后，所有的图像都被点击。它目前可以工作，但需要你点击一个随机图像后，所有12个已经渲染控制台日志(您赢了)和重置游戏板。我在试着消除最后一次点击。 开始了无法渲染console.log的问题(您赢了)。通过试用错误删除了代码，以清理我的代码并隔离每个部分的工作位置。我觉得问题出在handleClick函数上，我一直在研究这个函数，但到目前为止，我还没能想出太多方法来消除这个额外的点击。我觉得我不知道我应该寻找什么才能走上正确的道路。 class App extends Component {
constructor(
浏览 6提问于2019-06-15得票数 1
回答已采纳
我想有一个页面，呈现一个编辑器，从一个应用程序接口检索文档，然后打印窗口时，编辑器已经更新和完成重新渲染。如何识别编辑器重新渲染的时间？
示例代码：
componentDidMount() {
$.get('/api/')
.done((data) => {
this.setState({ document: Value.fromJSON(data) });
// workaround to try and make sure document is rendered
// what can I do
浏览 24提问于2018-03-01得票数 2
我有一个关于使用react进行api调用的问题。他们说要在componentDidMount生命周期方法中制作它们，但如果组件已经挂载，我是否必须以某种方式重新渲染它？如果我发出一个get请求，而组件显示了它获得的一些数据，该怎么办呢？谢谢!
浏览 29提问于2020-02-26得票数 1
回答已采纳
如果道具有变化，我想渲染组件。 当有setState，但我不能在render()中使用setState时，组件就会呈现，它将陷入无限循环。 我试图使用getDerivedStateFromProps，但是因为它是静态的，所以我不能在它内部使用forceUpdate()。 我这里的问题是如何检测属性中的变化，以及一旦检测到变化，如何启动渲染功能。
浏览 31提问于2020-06-30得票数 0
回答已采纳
如果有人能帮我的话？我需要此函数将filteredObject密钥存储在状态中。但是当我在componentDidMount()中调用这个函数时，它不起作用，当我在ComponentDidUpdate()中调用它时，它起作用了，但是会进行无限循环吗？
userData = () => {
const returnedEmail = storageManger.getEmailFromStore();
const { agents } = this.state;
if (returnedEmail) {
const filteredEmail = a
浏览 0提问于2019-12-08得票数 1
以下是代码：
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
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
