Fetch in React making call continuosly

November 19, 2021

I am fetching the data from json file but the issue is that when i checked network tab. It’s being call continuosly what can i do to resolve the problem.
: Network Tab Image

class Banner extends Component {

    constructor(props) {
        super(props);
        this.state = {
          buttonLink:"",
          bannerImg:""
        };
    }


    render() {


        const a =  fetch("./logo.json").then(response => response.json())
        .then((temp1)=> {this.setState({buttonLink:temp1.buttonLink,bannerImg:temp1.bannerImg});  
    });
   
return(....
<img src={this.state.bannerImg}></img>
....
)

>Solution :

in class component you can use some lifecycle methods like componentDidMount
so put your fetch method inside of a componentDidMount not in render method because whenever you call setState() method, it will call render method again,and inside of your render method you call api and setState again, that makes an inifinite loop, do something like this:

 componentDidMount(){
   const a = fetch("./logo.json").then(response => response.json())
  .then((temp1)=> {this.setState({buttonLink:temp1.buttonLink,bannerImg:temp1.bannerImg});  
 }