Estoy creando una aplicación simple con React (lo estoy aprendiendo). No entiendo cómo representar correctamente el objeto de datos ya que no puedo escribir day.key para acceder a la información que quiero imprimir. ¿Me puedes ayudar?
Aquí está el código que estoy usando: Fetch request:
import { useEffect, useState } from "react"; import Day from './Day'; const DayList = () => { const [data, setData] = useState(); useEffect(() => { const lat = 45.68; const long = 9.23; const apikey = "apikey"; fetch("https://api.openweathermap.org/data/2.5/onecall?lat="+lat+"&lon="+long+"&exclude=current,minutely,hourly&appid="+apikey) .then((res) => res.json()) .then((data) => { setData(data.daily) }) }, []) return ( <div className="day-list"> { data && <Day data = { data } /> } </div> ); } export default DayList;Aquí está el componente de procesamiento donde no sé cómo acceder a los datos
const Day = ( {data} ) => { return ( <div> {Object.keys(data).map((day) => ( <div className="day">{ ??? }</div> ))} </div> ); } export default Day;Puede encontrar una respuesta de ejemplo aquí ;
Los datos que obtiene de su código son una matriz y no un objeto, por lo que el resultado debería ser similar a este:
const Day = ( {data} ) => { return ( <div> {data.map((day) => ( <div className="day">{day.sunrise}</div> <div className="day">{day.sunset}</div> <div className="day">{day.temp.min}</div> <div className="day">{day.temp.max}</div> ..... ))} </div> ); } export default Day;Como está configurando data.daily como datos (variable de estado en su componente), necesita usar data.map para acceder a los valores ya que data.daily es una matriz.
const Day = ({ data }) => { return ( <div> {data.map((day) => ( <p>Temp: {day.temp}</p> <p>Feels Like: {day.feels_like}</p> ))} </div> ); } export default Day;