时间戳

首页 > 解决方案 > 当我将 ccomponentDidUpdate 与 axios 一起使用时，我无法停止反应 js 中的循环

javascript - 当我将 ccomponentDidUpdate 与 axios 一起使用时，我无法停止反应 js 中的循环

问题描述

当我使用 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;

标签： javascripthtmlreactjs

解决方案

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

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

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

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

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

我建议：使用反应钩子useEffect并更改为功能组件。

推荐阅读