0

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;

2 respuestas 2

0

Puede que el cambio de estado no se refleje de inmediato debajo del seteo (ya que no es asincronico), por ende te recomiendo que hagas el logeo dentro de un effect de ese estado

useEffect(() => {
  console.log("Feeds state:",feeds)
}, [feeds]);
De esta forma vas a poder ver si se está seteando correctamente.

Tambien dentro del .fetch del get podrías logear resp.data para ver si la api está retornando un valor correcto y en que formato

6
  • Hola Franco, gracias por tu pronta respuesta, he probado tu solucion y nada, he realizado un console.log(resp.data) y se pinta la respuesta correctamente, me devuelve un objeto --->> '{id: '17913343559148982', media_type: 'IMAGE', media_url: 'scontent.cdninstagram.com/v/t51.29350-15/2…dcKiD6EilavlL8Z-FtPk5VzENPwdB7XdXC5pg&oe=61FDFD51', username: 'giove_nails', timestamp: '2022-01-14T21:42:56+0000'}' <<<----- y en el console.log(feeds) = []
    – luguidu 77
    Commented el 1 feb. 2022 a las 15:39
  • Parece ser que no setea correctamente la instruccion setFeedsData, porque el console.log(feeds) que meto en la respuesta tambien es siempre vacio [], y claro aunque haga el useEffect que me recomendaste, éste toma siempre el valor [].
    – luguidu 77
    Commented el 1 feb. 2022 a las 15:52
  • Ya descartamos que no sea la response la que trae problemas, yo creo que el error se encuentra en la definición "listaFeeds = resp.data " ya que a listaFeeds no se le define si es un var o una const, intenta seteando el estado directamente con setFeedsData(resp.data) Commented el 1 feb. 2022 a las 17:49
  • también lo intenté en primera instancia y no me funcionó, luego lo intenté comentando esta linea >>> feeds.map((lista) => ( <Feed key={lista} url={lista.media_url} type={lista.media_type} /> ))
    – luguidu 77
    Commented el 1 feb. 2022 a las 19:53
  • al volver a descomentar me da el error --->>>>> Array.prototype.map() expects a return value from arrow function. Por lo que algo ahi es donde estoy haciendo al mal
    – luguidu 77
    Commented el 1 feb. 2022 a las 19:54
0

He conseguido quitar el error pasando los feeds a una nueva array listaFeeds para luego hacer en este ultimo un map (no se cual es la explicación, creo que antes de que se setee feeds, éste está vacío y por eso feeds.map daba error). Bueno me ha servido de experiencia después de días de frustración (react me rompe la cabeza). Mil gracias @Franco Mendo por darme luz, gracias a ti he encontrado la solución.

listaFeeds.push(feeds)

  return (
       
    <div className="container">
     {

       listaFeeds.map((lista, i) =>(
          <Feed key={i} url={lista.media_url} type={lista.media_type} />
       ))

     }   
         
    </div>
  );

1
  • Hola, podrías explicarme como has podido acceder a las fedds por id, porque a mi me da error de permisos y no hay manera de que facebook me de esos permisos. Commented el 27 sept. 2023 a las 8:37

Tu Respuesta

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

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