如何在reactjs中打破componentDidUpdate中的无限循环答案

【问题标题】：How to break infinite loop in componentDidUpdate in reactjs如何在reactjs中打破componentDidUpdate中的无限循环
【发布时间】：2017-05-16 10:15:37
【问题描述】：

我目前正在使用 reactjs 制作仪表板，其中有 4 个选项卡或按钮图表正在正确创建，但唯一的问题是，当我们单击不同的仪表板并且它在同一个面板中具有相同的图表而不是图表没有更新时，我同时使用了这两个componentDidMount() 和 componentDidUpdate 虽然它给出了正确的输出但它创建了一个无限循环我也应用了一些条件但它仍然处于无限循环中谁能帮助我？？

这是我的代码

class BarChartComponent extends React.Component 
{

   constructor(props) 
   {
      super(props);

      this.state = {
         data: null
      }
   };

   componentDidMount()
    {
            var that = this;
            $.ajax({
                    method: "GET",
                    url: "http://10.0.3.8:8050/querydata?query_id="+that.props.id,
                    success: function(data) 
                    {

                        console.log("component did mount method called");
                        console.log(1,JSON.stringify(data));
                        var BarChartData  = [
                        {
                            key: "totals",
                            values: []
                        }
                        ];
                        data.forEach(function (d)
                        {
                            d.value= +d.value
                            BarChartData[0].values.push(d)
                        }) 
                        console.log(2,JSON.stringify(BarChartData))
                        that.setState({data:BarChartData});
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown)
                    { 
                        console.error("Status: " + textStatus);
                        console.error("Error: " + errorThrown); 
                    }       
                });         
    }

    componentDidUpdate(prevProps, prevState)
    {
                if(prevState.data !== this.state.data )
                {
                    var that = this;
                    $.ajax({
                        method: "GET",
                        url: "http://10.0.3.8:8050/querydata?query_id="+that.props.id,
                        success: function(data) 
                        {

                            console.log("component did update method called");
                            var BarChartData  = [
                            {
                                key: "totals",
                                values: []
                            }
                            ];
                            data.forEach(function (d)
                            {
                                d.value= +d.value
                                BarChartData[0].values.push(d)
                            }) 

                            if( prevProps.id !== that.state.id )
                            {
                                that.setState({data:BarChartData});
                                console.log(3,JSON.stringify(BarChartData))
                                console.log(4,JSON.stringify(that.state.data))
                            }                   
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown)
                        { 
                            console.error("Status: " + textStatus);
                            console.error("Error: " + errorThrown); 
                        }       
                    });         

                }
    }



    render()
    {

        if (this.state.data==null)
        {
            return (<h1>Loading...</h1>);
        }
        return (


             <NVD3Chart type="discreteBarChart" datum={this.state.data} x="name" y="value"/>

        );
    }
}

window.BarChartComponent = BarChartComponent;

【问题讨论】：

标签： javascript ajax reactjs

【解决方案1】：

if(prevState.data !== this.state.data) 不比较实际对象是否相等。这就是为什么我假设您的$.ajax 请求在componentDidUpdate 中连续触发，即使实际数据相同。

如果你真的想走昂贵的路，你可以使用 lodash (_.isEqual) 来比较对象（或 jQuery 中的内置方法）。不过，最终出于性能原因比较特定数据是一种更好的方法。

【讨论】：

感谢您，我已使用 lodash 进行比较及其工作
感谢 isEqual 比较对我有用，我只在 lodash 中添加了 isEqual 函数而不是整个库，以避免膨胀文件大小stackoverflow.com/a/35251059/8926452

【解决方案2】：

我认为最好在 componentDidUpdate 的顶部使用此检查：

if (prevProps.id !== this.props.id)

因为您的请求仅取决于此参数。

然后你不会有无限循环，因为 id 具有标量值并且相等检查将起作用。

【讨论】：