当前位置: 首页 > 面试题库 >

为什么componentDidUpdate()创建一个无限循环?

阎经武
2023-03-14
问题内容

我已经存储url了一个tokenin statein
Parent组件。我传递的urltokenprops从父Component到子Component。然而,如果在父母一些事件ComponentsetState()被触发,因此,componentDidUpdate()儿童Component被执行。
由于componentDidUpdate()造成了无限循环 (因为它触发了子组件内部的setState()) ,所以我放置了条件。但这不能防止错误。
子组件即DisplayRevenue如下:

import React, { Component } from 'react';
import '../App.css';
import ListData from './listdata.js'
var axios = require('axios');

class DisplayRevenue extends Component {

  constructor(props){
    super(props);
    this.state = { data:[], url:"" }
  console.log(this.props.url);
  }

  componentWillMount() {
    this.loadRevenue(this.props.url, this.props.token);
 }

  componentDidUpdate(){    //creates infinite loop
  //  console.log(this.props.url);
    this.loadRevenue(this.props.url, this.props.token);
  }

  setData(data){
    //if(this.state.url != this.props.url){
    if(this.state.data != data.data){
      console.log(data.data);                     //(1)
  //    console.log(this.state.url);              //(2)
      this.setState(data:data);             
      console.log(this.state.data);               //(3)
  //    console.log(this.props.url);              //(4)
    }     //(1) & (3) yields exactly same value so does (2) & (4)
  }

  loadRevenue(url,token){
    axios({
      method:'get',
      url:url,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
     .then( (response) => {
    //   console.log(response.data);
       this.setData(response.data);
     })
     .catch(function (error) {
       console.log("Error in loading Revenue "+error);
     });
  }

  render() {
    return (
      <ListData data={this.state.data}/>
    );
  }
};

export default DisplayRevenue;

父组件即MonthToDate如下:

import React, { Component } from 'react';
import '../App.css';
import DisplayRevenue from './displayRevenue'
var axios = require('axios');

class MonthToDate extends Component {

  constructor(props){
    super(props);
    this.state = {
      data:null,
      url:"http://localhost:3000/api/monthtodate"
    }
    //console.log(this.props.location.state.token);
  }

  groupBySelector(event){
    if ((event.target.value)==="invoice"){
      this.setState({url:"http://localhost:3000/api/monthtodate"})
    } else if ((event.target.value)==="customer") {
      this.setState({url:"http://localhost:3000/api/monthtodate?group-by=customerNumber"})
    } else if ((event.target.value)==="month") {
      this.setState({url:"http://localhost:3000/api/invoices?group-by=month"})
    } else {
      this.setState({url:"http://localhost:3000/api/monthtodate"})
    }
    console.log(this.state.url);
  }

  render() {
    return (
      <div>
      <select onChange={(event)=>this.groupBySelector(event)}>
        <option value="invoice">GROUP BY INVOICE</option>
        <option value="customer">GROUP BY CUSTOMER</option>
        <option value="month">GROUP BY MONTH</option>
      </select>
        <DisplayRevenue url={this.state.url} token={this.props.location.state.token}/>
      </div>
    );
  }
}

export default MonthToDate;
  • 我想念什么?
  • 另外,在收到urlin子组件之后,我想基于那个渲染另一个组件url。例如<ListData />component只能处理一种类型的url。如何render()根据url类型在其中渲染另一个组件?

问题答案:

您正在中调用ajax调用componentDidUpdate,并在回调上设置了状态,这将触发另一个调用并进行更新,这将再次调用ajax请求,而回调将再次设置状态,依此类推。
您的条件setData

if(this.state.data != data.data)

因为对象是引用类型并且无法比较,所以将始终返回true,无论从ajax调用返回的数据是什么,它始终是不同的对象,并会true根据您的条件返回。例:

var obj1 = {a:1}

var obj2 = {a:1}



console.log(obj1 != obj2); // returns true

您可以做的就是比较两个对象中的原始值。
例如:

if(this.state.data.id != data.id) // id could be a string or a number for example

编辑
我忘记提及的另一件事可能与您的问题没有直接关系,但应该强制执行, 切勿
在内部componentWillMount或之内进行Ajax请求constructor,因为在您的Ajax请求完成之前将调用render函数。您可以在DOCS中阅读有关它的信息。
应该在componentDidMount 生命周期方法中调用Ajax请求。

编辑#2
另一件事可能会有所帮助,在MonthToDate渲染函数中,您正在每个渲染器上传递函数的新实例(这可能会导致性能下降)

<select onChange={(event)=>this.groupBySelector(event)}>

尝试将其更改为此(事件将自动传递给处理程序):

 <select onChange={this.groupBySelector}>

您还需要将其绑定到构造函数中:

constructor(props){
    super(props);
    this.state = {
      data:null,
      url:"http://localhost:3000/api/monthtodate"
    }
    //console.log(this.props.location.state.token);

    this.groupBySelector = this.groupBySelector.bind(this); // binds this to the class
  }


 类似资料:
  • 我在尝试一个测试,我写了这个程序。。。 六羟甲基三聚氰胺六甲醚。。。在下面的代码中,我知道我用了“I”而不是“j”,所以为了解决这个问题,我用了这个 我在节目中遇到的问题是- 在上面的代码中,当我删除这个if块时- 这个节目无限期地进行。。。。。。。。。但当我再次放置这个if块时,程序在执行一段时间后自动终止。我也在这个链接上读到了这一点,但它展示了java的例子 它们显示了负值的原因,但在我的程

  • 该程序应该使用int 0x10在ASCII中打印一个具有给定字符的金字塔,3行的预期结果(下面代码中使用的数量)将是: A. a a a a a 要编译和运行代码,我使用nasm编译它,然后使用qemu进行仿真: 然而,程序get无法打印所有ASCII值。此外,如果有任何针对nasm代码的调试器,可以让您逐行运行,允许您检查寄存器值,这对学习也很有帮助。

  • 尝试编写一个程序,其中用户输入他们一周的费用。麻烦在于我希望程序重新询问用户是否输入了不可接受的输入。我想出了如何检测负值的方法,但是当尝试捕获输入不匹配异常(如果像输入字符或字符串一样)时,循环只是无限运行,要求“星期一费用:”我如何使它,以便用户有另一个回答的机会?我试着Rest一下;但是这也打破了做而循环,我不想要。 这是我目前为止的代码: 谢谢你的帮助

  • 这是我的代码: 所以这里有一个无限循环错误(Stackoverflow)。但是,如果我注释掉我创建的两个对象中的任何一个,这都没关系。 我的代码中的对象如何导致Stackoverflow错误?

  • 我有一个看起来很简单的问题,但由于某种原因我无法绕过它。基本上我的程序正在导致一个无限循环,我不知道为什么。 下面是我陷入的特定循环: 当我运行它时,它总是问我输入列#。我给它一个数字,它接受这个数字,$response变为True,但while循环继续运行,就好像<code>的$response</code>为false一样。我是Perl新手,所以可能我遗漏了一些东西,但是($response=

  • 问题内容: 我注意到eclipse最近创建了一个.settings目录,其中包含1个文件,我想知道是否应该将此添加到版本控制中?SVN? 还有,这是新的吗?我已经使用eclipse已有相当长的一段时间了,但从未注意到它。 目录中文件的内容是这样的: 这些设置是否应该在工作区范围内而不是特定于项目? 问题答案: 此文件记录项目特定的设置与工作空间首选项。 我注意到该文件通常是在将常规Java项目转换