Estoy creando un clon de giphy y por ende estoy usando su API.
El problema ocurre en la ruta de mi app /gif/:id
. Los componentes que terminan en "Loading" son react placeholders.
Leí acerca del problema e intente con AbortController, y ahora con useRef para saber si está montado o no el componente.
Lo que busco como resultado es que al solicitar un gif en especifico, SimilarGifs carge automaticamente los gifs relacionados al mismo, y cuando seleccione otro gif, vuelva a recargarse el componente para volver a buscar gifs relacionados al gif actual
El error que obtengo es:
useGifsAPI el encargado de ejecutar el servicio correspondiente al endpoint que quiera solicitar:
export function useGifsAPI(service, options) {
const [loading, setLoading] = useState(false)
const [gifs, setGifs] = useState([])
const isMounted = useRef(null)
useEffect(() => {
isMounted.current = true
if (isMounted.current) {
setLoading(true)
service(options).then(data => {
setGifs(data)
setLoading(false)
})
}
return () => isMounted.current = false
}, [options])
return { loading, gifs }
}
Componente GifQueried que actúa como vista de la ruta /gif/:id
:
15 export default function GifQueried() {
16 const { id } = useParams()
17
18 const { loading, gifs } = useGifsAPI(getGifData, {id})
19
20 return (
21 <div id="gif-queried" className="container">
22 <div className="sub-container">
23 { !loading
24 ? <React.Fragment>
25 <OwnerProfile owner={gifs.user} source={gifs.source} />
26 <GifInfo url={gifs.images && gifs.images.downsized_large.url} title={gifs.title} />
27 <SimilarGifs similarTo={gifs.title} />
28 </React.Fragment>
29 : <React.Fragment>
30 <OwnerProfileLoading />
31 <GifInfoLoading />
32 <SimilarGifsLoading />
33 </React.Fragment>
34 }
35 </div>
36 </div>
37 )
38 }
(getGifsSearched es el servicio que hace la peticion a la api de giphy y me devuelve los registros, nada mas)
Componente SimilarGifs que recibe una prop la cual se usara para buscar gifs relacionados a la misma:
7 export default function SimilarGifs({similarTo}) {
8
9 const { gifs } = useGifsAPI(getGifsSearched, {search: similarTo, page:0})
10
11 return (
12 <div id="similar-gifs">
13 { gifs.map(gif => <GifElement section="similar" gif={gif} key={gif.id} />) }
14 </div>
15 )
16 }
axios
? Si es así te recomiendo leer este artículo, que habla de exactamente ese problema. Tal vez de igual manera te pueda ayudar a buscar una solución, yo tenía el mismo problema con un objeto tipo drawer que hacía un fetch. – FranAcuna el 25 oct. 20 a las 18:01console.log
para ver si elsimilarTo
o elgifs
actualizan tres veces? – milmal el 25 oct. 20 a las 19:13useEffect
para solo actualizar cuando similarTo cambia. – milmal el 26 oct. 20 a las 5:30