1

Tengo el componente Results, que mediante un useEffect hace una consulta a giphy y trae un listado de gifs que son tendencia y los muestra apenas se carga la página

import {React, useState, useEffect} from 'react';
    
    
    const Results = (props) => {   
       
       
        const [gettingTrendingGifs, setGettingTrendingGifs] = useState([]);
    
    
        useEffect(() => {
            fetch(`http://api.giphy.com/v1/gifs/trending?&api_key=x58Cq33OnTiwdQ7gRoG1bsCNVFJdEX1d&limit=10`)
            .then((res)=>{
                return res.json();
            })
            .then((trendingGifsCollection)=>{
                setGettingTrendingGifs(trendingGifsCollection.data);
            });
        },[gettingTrendingGifs]);
    
        if(props.newGifList !== undefined){
            setGettingTrendingGifs(props.newGifList);
            console.log(props.newGifList);
        }
    
        return (
            <div className="results">
                <div className="container">
                    {gettingTrendingGifs.length === 0 ?
                    <div className="spinner">
                         <img src="../../img/spinner.gif" alt="loading"/>
                    </div>
                        :
                        gettingTrendingGifs.map((singleGif)=>{
                            return(
                                <div className="imgContainer">
                                    <img src={singleGif.images.downsized.url} alt="" />
                                </div>
                            )
                        })
                     }
                </div>
            </div>
          
        );
    }
    
    export default Results;

Tengo otro componente que se llama searching, ese componente recoge el value de un input y hace una consulta a giphy para traer un lista de gifs por la palabra que tecleo el usuario y la consulta se realiza al hacer click sobre el btn de búsqueda, Hasta ahí todo funciona bien.

Ahora yo quiero enviar ese array a mi componente Result como un prop y actualizar el estado y que en lugar de cargarme la lista de gifs trending pues me muestre la lista de gifs que envié en el prop. el problema es que esto me cre un bucle infinito y me muestra por consola muchísimas veces la lista de gifs que pasé por props y react me muestra este error:

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. No se si es culpa del UseEffect, hasta ahora estoy aprendiendo a usarlo sin embargo le puse que renderizara de acuerdo al estado pero siempre me da lo mismo.

Gracias por la ayuda

import {React, useState, useEffect} from 'react';
import Results from './Results';

const Searching = () => {

    const [getInputValue, setInputValue] = useState("");
    const [newGifList, setGifList] = useState([]);

    const hadleClick = () => {
        if(getInputValue.length > 0){
            fetch(`http://api.giphy.com/v1/gifs/search?q=${getInputValue}&api_key=x58Cq33OnTiwdQ7gRoG1bsCNVFJdEX1d&limit=10`)
            .then((res)=>{
                return res.json();
            }).then((gifsList)=>{
                setGifList(gifsList.data)
               
            })
        }
    }

    const inputValue = (e) => {
        setInputValue(e.target.value);
    }

  
    return (
        <div className="searching">
            <h1>¡Inspirate y busca los mejores GIFS!</h1>
            <div className="container">
                <div className="topSearching">
                    <div className="img-container">
                        <img src="../../img/ilustra_header.svg" alt=""/>
                    </div>
                    <div className="searchin-bar">
                        <input type="text" onChange={inputValue} value={getInputValue} placeholder="Buscar gifs" />
                        <button onClick={hadleClick}>
                            <img src="../../img/icon-search-mod-noc.svg" alt=""/>
                        </button>
                    </div>
                    <button>{getInputValue}</button>
                 </div>
            </div>

            {newGifList.length > 0 ?  <Results  newGifList={newGifList} /> : <Results />}
        </div>
    );
}

export default Searching;

1 respuesta 1

0

El problema se encuenta en el useEffect del componente Results

Pasa que estas enviando una dependencia que se cambia dentro del componente, es decir, el useEffect se ejecuta cuando la dependencia gettingTrendingGifs cambia, pero al estar ejecutando el cambio del estado setGettingTrendingGifs provocas que se ejecute nuevamente generando un loop

       useEffect(() => {
            fetch(`http://api.giphy.com/v1/gifs/trending?&api_key=x58Cq33OnTiwdQ7gRoG1bsCNVFJdEX1d&limit=10`)
            .then((res)=>{
                return res.json();
            })
            .then((trendingGifsCollection)=>{
                setGettingTrendingGifs(trendingGifsCollection.data);
            });
        },[]);

Elimina la dependencia gettingTrendingGifs del useEffect debería funcionar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.