我在axios上使用ccomponentDidUpdate时无法停止React js中的循环

时间:2019-10-31 01:26:47

标签: javascript html reactjs

当我使用axios进行componentDidUpdate并更新状态时,出现无限循环。 因此,我创建了一个下面的简单组件,但是发生了无限循环。

这是我的代码来源:

import React,{Component} from 'react';
import axios from 'axios';
import HeaderItem from './HeaderItem';
import {BrowserRouter as Router} from "react-router-dom";  
class categorie extends React.Component{
state={
    content:[]
 }
 componentDidMount()
 {
    this.getContent();
 }
    componentDidUpdate(prevProps,prevState){
        if(this.state.content!==prevState.content)
        {
            this.getContent();
        }
    }

getContent=()=>{
    axios.get(`http://localhost:3000/article?categorie=${this.props.match.params.id}`).then((res)=>{
        this.setState({
            content:res.data.filter(data=>data.categorie==this.props.match.params.id)
        })      
    })
}

render(){
return (  
 <div>
     <div className="container">
         <div className="row">
                 {this.state.content.map(data=>(
                     <h1>{data.title}</h1>
                 ))}
         </div>
     </div>
  </div>
 );
}
}
export default categorie;

2 个答案:

答案 0 :(得分:0)

如果您的数据以数组的形式出现,那么您的条件将始终为真,这将使您的函数始终有效

[1, 2] !== [1, 2] // true

您可以通过对两个数组的内容进行字符串化并进行比较来比较两个数组:

您需要使用json.stringify比较数组对象

,或者您可以使用 lodash ._isEqual进行比较。

我建议:使用react钩子useEffect并更改为功能组件。

答案 1 :(得分:0)

是专门针对此组件还是它的父组件?父级也可以触发组件的重新渲染。 您看到多个get请求吗?