为什么componentDidUpdate（）创建一个无限循环？

Question

我已将和token存储在state的Parent组件中。我将url和token作为props从父Component传递给子Component。但是，如果母公司Component中有某个事件，则触发setState()，结果子Component的componentDidUpdate()被执行。
由于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; 

• 我缺少什么？
• 此外，在我收到子组件中的url之后，我想根据url呈现不同的组件。例如<ListData />组件只能处理url的一种类型。如何根据url类型在render()内呈现另一个组件？

Answer 1

您调用componentDidUpdate Ajax调用，并设置上的回调，将触发另一个调用和更新，这将再次调用Ajax请求和回调将再次等设置状态的状态。
您在setData条件：

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

因为对象是引用类型和所不能比拟的，无论什么数据从AJAX调用返回它永远是一个不同的对象，并将返回true将始终返回true在你的情况下。 例子：

var obj1 = {a:1} 
 
var obj2 = {a:1} 
 

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

你可以做什么，是比较两个对象中primitives值。
例如：

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

编辑
另一件事我忘了提及这可能不涉及到您的问题直接，但应该强制执行，决不为此事做内部componentWillMount Ajax请求或constructor因为渲染功能将在您的ajax请求完成之前被调用。你可以在DOCS中阅读。
应该在componentDidMountlife cycle method中调用Ajax请求。

编辑＃2
另一件事，可以是有益的，在MonthToDate渲染功能，你在每个渲染传递函数的一个新实例（可会损害Reconciliation and diff algorithm）：

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

尝试将其更改为这个（事件将自动传递给处理程序）：

<select onChange={this.groupBySelector}> 

您还需要将它绑定在c onstructor：

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 
    }