当我使用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;
答案 0 :(得分:0)
如果您的数据以数组的形式出现,那么您的条件将始终为真,这将使您的函数始终有效
[1, 2] !== [1, 2] // true
您可以通过对两个数组的内容进行字符串化并进行比较来比较两个数组:
您需要使用json.stringify
比较数组对象
,或者您可以使用 lodash ._isEqual
进行比较。
我建议:使用react钩子useEffect
并更改为功能组件。
答案 1 :(得分:0)
是专门针对此组件还是它的父组件?父级也可以触发组件的重新渲染。
您看到多个get
请求吗?