soy nuevo en React y llevo unos días tratando de realizar un componente de petición a la api de informacion basica de Instagram, sólo necesito visualizar las fotos, nada más, pero sino me equivoco, no puedo solicitarlo de una vez, es decir, primero tengo que pedir los ids de las publicaciones y en una segunda peticion ya si solicitarlas { axios.get(https://graph.instagram.com/${feedID.id}?fields=id,media_type,media_url,username,timestamp&access_token=${tokenProp.current}
)}
El problema es que la respuesta a esta segunda peticion la paso por useState {setFeedsData(listaFeeds) } pero este estado no se actuliza, es decir, no se refleja para pintarlo en el return , listaFeeds me aparece como array vacio { console.log('Listafeeds :' + listaFeeds)}
import React, { useState, useEffect, useRef } from 'react'
import axios from 'axios'
import Feed from './Feed'
import './instaFeeds.css'
const InstaFeeds = ({token, ...props}) => {
//const [idFeeds, setIdFeedsData] = useState([1,2,3]);
const [feeds, setFeedsData] = useState([]);
//const [nodata, setNodata] = useState(true);
//use useRef to store the latest value of the prop without firing the effect
const tokenProp = useRef(token);
tokenProp.current = token;
var datos = []
var listaFeeds = []
useEffect(() => {
// this is to avoid memory leaks
// const abortController = new AbortController();
async function fetchIDPost () {
try{
axios.get(`https://graph.instagram.com/v12.0/4992585090804236/media?access_token=${tokenProp.current}`)
.then( (resp) => {
resp.data.data.map(async feedID => {
console.log(feedID.id);
axios.get(`https://graph.instagram.com/${feedID.id}?fields=id,media_type,media_url,username,timestamp&access_token=${tokenProp.current}`)
.then((resp) => {
//setNodata(true)
listaFeeds = resp.data
// console.log(listaFeeds);
setFeedsData(listaFeeds)
console.log(feeds);
}).catch(error => {
console.log('no recupera MEDIA de la API' + error);
});
})
}).catch(error => {
console.log('no recupera IDs de la API ' + error);
});
} catch (err) {
console.log('error', err)
}
}
//------------- LLAMADA A LA FUNCION PRINCIPAL fetchIDPost -------------------
fetchIDPost();
//----------------------------------------------------------------------------
}, []) //eslint-disable-line react-hooks/exhaustive-deps
console.log('Listafeeds :' + listaFeeds)
/* if(!nodata) {
return(
<div className="container">
{
//TODO: HACER EN FEED UN CASE EN EL CASO DE QUE NO TRAE DATOS DE LA API
<Feed url={'https://www.solvetic.com/uploads/tutorials/monthly_04_2018/a3aacd63c60b3e745b0bb2c8dc2d6417.png'} />
}
</div>
)
} */
return (
<div className="container">
{
feeds.map((lista) => (
<Feed key={lista} url={lista.media_url} type={lista.media_type} />
))
}
</div>
)
}
export default InstaFeeds;