Fetch in React making call continuosly-CodePudding

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>
....
)

CodePudding user response：

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});  
 }

CodePudding user response：

You can't call fetch inside render function.

You can use functional component to easily fetch the data.

import React, { useEffect, useState } from 'react';

const Banner = () => {
    const [image, setImage] = useState({ buttonLink: '', bannerImg: '' });

    useEffect(() => {
        fetch('./logo.json')
            .then((response) => response.json())
            .then((temp1) => {
                setImage({ buttonLink: temp1.buttonLink, bannerImg: temp1.bannerImg });
            });
    }, []);

    return <img src={image.bannerImg}></img>;
};

export default Banner;