Tengo el siguiente código React y TypeScript:
const fetchData = async () => { const res: any = await fetch("https://api.spotify.com/v1/search?q=thoughtsofadyingatheist&type=track&limit=30", { method: "GET", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: "Bearer BQD2JKxAuqmgsNKgWx6JiRMCskc3l1FK3VsHfOah3ey86GC8EmGBlrEGAfTCyVB1cFo2TDVQYQm8RvB_YQD6V9cXUf_HER0dfBeLc_AZ0N56VNOrsLyt2yzK6gaD5WarThefqmZj68ODXUVrLwQYfuocahIUhWOEO4WuziwVvloE", }, }); const data: any = await res.json(); console.log(data.tracks.items); return data.tracks.items; }; useEffect(() => { const data: any = fetchData(); console.log(data); setLoading(false); }, []); Cuando imprimo los datos en la consola desde la función fetchData obtengo los datos esperados, pero cuando los imprimo desde el gancho useEffect obtengo una promesa pendiente como esta: Promise {<Pending>} .
Agradecería cualquier ayuda.
El useEffect debe ser como el siguiente fragmento de código. Esto sucede porque una función asíncrona siempre devuelve una Promise y debe await o usar asyncFunction.then(result => {}) para obtener su resultado.
useEffect(() => { fetchData().then(data => { console.log(data); setLoading(false); } }, []); Para usar await en useEffect , desafortunadamente debe ser con un IIFE porque useEffect aún no admite funciones asíncronas.
useEffect(() => { (() => async { const data = await fetchData(); console.log(data); setLoading(false); })(); }, []);