Estoy obteniendo los datos del archivo json, pero el problema es que cuando revisé la pestaña de red. Me están llamando continuamente, ¿qué puedo hacer para resolver el problema? : Imagen de la pestaña Red
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> .... )en el componente de clase, puede usar algunos métodos de ciclo de vida como componenteDidMount, así que coloque su método de búsqueda dentro de un componenteDidMount no en el método de procesamiento porque cada vez que llame al método setState (), llamará al método de procesamiento nuevamente, y dentro de su método de procesamiento llamará a api y setState de nuevo, eso hace un bucle infinito, haz algo como esto:
componentDidMount(){ const a = fetch("./logo.json").then(response => response.json()) .then((temp1)=> {this.setState({buttonLink:temp1.buttonLink,bannerImg:temp1.bannerImg}); }No puede llamar a buscar dentro de la función de render .
Puede usar un componente funcional para obtener fácilmente los datos.
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;