0

Soy un novato autodidacta y estoy intentando realizar un pequeño proyecto usando una API, en este caso "https://bluelytics.com.ar/#!/api". Mi problema es que intento mapear el useState utilizado (cotización) y no logro ver cómo acceder a, por ejemplo, el valor de venta del blue.

const Cotizacion = () => {

const [cotizacion, setCotizacion] = useState([])

const getCotizacion = () =>{
    const pedido = fetch('https://api.bluelytics.com.ar/v2/latest')
    pedido.then((respuesta)=>{
        console.log(respuesta)
        return respuesta.json()
    })
    .then((respuesta)=>{
        console.log(respuesta)
        console.log(respuesta.blue.value_buy)
        setCotizacion(respuesta)
    })
}

useEffect(()=>{
    getCotizacion()
},[])

esto sería el cuerpo de mi código. Como ven, hay dos console log, uno en respuesta, cuyo resultado es: "{oficial: {…}, blue: {…}, oficial_euro: {…}, blue_euro: {…}, last_update: '2023-03-31T17:30:31.977658-03:00'} blue : {value_avg: 393, value_sell: 395, value_buy: 391} blue_euro : {value_avg: 422.5, value_sell: 425, value_buy: 420} last_update : "2023-03-31T17:30:31.977658-03:00" oficial : {value_avg: 211.5, value_sell: 216, value_buy: 207} oficial_euro : {value_avg: 228, value_sell: 233, value_buy: 223} [[Prototype]] : Object"

Dado esto, yo asumo, como hago en un console.log con notacion de punto que debería poder acceder al valor indicado. Hago "console.log(respuesta.blue.value_buy)" y el resultado es 391.

Ahora, de vuelta al código, mi return es:

  return (
<div>
    <h1>Cotización</h1>
    {
        cotizacion.length > 0 &&
        cotizacion.map((iteracion)=>{
            return (
                <div key={iteracion.id}>
                    <p>{iteracion.blue.value_buy}</p>
                </div>
            )
        })
    }
</div>

) }

Pero no aparece nada en pantalla salvo el h1 y en consola no figura ningún error. ¿Qué estoy haciendo mal? ¿Cómo puedo acceder a ese valor o, en definitiva, a los valores contenidos en lo que obtengo de mi fetch?

Desde ya muchas gracias y perdón las molestias.

1
  • Bienvenido a la comunidad, sugiero iniciar la depuración revisando si la respuesta es un arreglo, coloca este console en el then antes de setear estado: console.log(Array.isArray(respuesta))
    – g.4
    el 31 mar. a las 21:57

1 respuesta 1

1

Si la respuesta es tal como pones, el map no te vale, ya que es para iterar un array y tu lo que obtienes es un objeto. Si quieres acceder a la propiedad blue, deberías hacer:

return (
    <div>
        <h1>Cotización</h1>
        <p>{cotizacion?.blue?.value_buy}</p>
    </div>)

el ? es para que antes de tener valor cotizacion no de error. una vez que termine la peticion de la api y tenga valor se mostrara.

Tambien deberías inicializar la variable cotización con el mismo formato que devuelve la llamada o con null o undefined.

const [cotizacion, setCotizacion] = useState({});
1
  • ¡Muchísimas gracias! Funciona perfecto así! el 31 mar. a las 23:03

Tu Respuesta

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

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