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;