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.
respuesta
es un arreglo, coloca este console en elthen
antes de setear estado:console.log(Array.isArray(respuesta))