Tener problemas para iterar a través de la matriz JSON con for loop (res2.data.list), tomar tres puntos de datos y colocarlos en una nueva matriz. Obteniendo el error "el pronóstico no es un constructor en fetchWeather". ¿Cómo haría esto en un componente funcional?
const fetchWeather = async () => { try { await window.navigator.geolocation.getCurrentPosition( savePositionToState ); const res = await axios.get( `${process.env.REACT_APP_API_URL}/weather?lat=${latitude}&lon=${longitude}&appid=${process.env.REACT_APP_API_KEY}&units=imperial` ); const res2 = await axios.get( `${process.env.REACT_APP_API_URL}/forecast?lat=${latitude}&lon=${longitude}&appid=${process.env.REACT_APP_API_KEY}&units=imperial` ); setTemperature(Math.round(res.data.main.temp)); setWeather(res.data.weather[0].main); console.log(res2.data.list) // console.log(res.data, res2.data); for (let i=0; i < res2.data.list.length; i+=1) { const temporary = new forecast( res2.data.list[i].dt_txt, res2.data.list[i].weather[0].icon, res2.data.list[i].main.temp, res2.data.list[i].dt_txt, ) } } catch (err) { console.error(err); } };Parece que desea transformar cada elemento en res2.data.list en un nuevo objeto, luego configure esa nueva lista en el estado React.
.map se usa para transformaciones de lista 1 a 1.
Entonces setForecast(res2.data.list.map(e => ({dt_txt: e.dt_txt, etc}))
Dado const [forecast, setForecast] = useState([]); Asumiré que desea que el forecast sea una matriz de objetos con las propiedades específicas de la matriz de respuesta res2.data.list . forecast es el objeto de estado, no es un constructor, por lo que intentar invocar un new forecast no funcionará.
Puede asignar res2.data.list a una nueva matriz y actualizar el estado del forecast .
const fetchWeather = async () => { try { await window.navigator.geolocation.getCurrentPosition( savePositionToState ); const res = await axios.get(.....); const res2 = await axios.get(.....); setTemperature(Math.round(res.data.main.temp)); setWeather(res.data.weather[0].main); setForecast(res2.data.list.map(item => ({ text: item.dt_txt, icon: item.weather?.[0]?.icon, mainTemp: item.main?.temp, }))); } catch (err) { console.error(err); } };