Estoy trabajando en un proyecto de aplicación meteorológica en React como principiante. Estoy usando OpenWeatherAPI en ese caso.
Mi problema es cuando trato de usar forEach, da un error como aparece a continuación.
ApiCall.jsx:15 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')Aquí está mi componente de encabezado:
import ApiCall from './ApiCall'; function Header() { const cities = ["İstanbul", "Ankara", "İzmir"] return ( <div> <div className="header"> <select name="selection"> <option value="istanbul">{cities[0]}</option> <option value="ankara">{cities[1]}</option> <option value="izmir">{cities[2]}</option> </select> </div> <ApiCall getCities={cities} /> </div> ) } export default HeaderY este es mi componente ApiCall:
import axios from "axios" import { useEffect, useState } from "react" function ApiCall({ getCities }) { const[data, setData] = useState([]) useEffect(() => { axios(`https://api.openweathermap.org/data/2.5/forecast?q=${selectCity}&appid=c681e6e33ec339728fdf88e0b24a2a01`) .then(res => setData(res.data)) .catch(err=> console.log(err)) }) const { city, list } = data const selectCity = getCities.array.forEach((element) => { if (city.name === element) { return element } }); return ( null ) } export default ApiCallTodas las respuestas serán apreciadas.
El foreach debería ser así
getCities.forEachEn vez de
getCities.array.forEachQué piensas ?
Si getCities es una matriz, debe usar forEach en lugar de usar .array.forEach
Parece que intenta filtrar todas las ciudades disponibles con las ciudades que obtiene como propiedad de su componente ( getCities ).
Dado que getCities es una matriz, puede llamar directamente a la función forEach y recorrer las ciudades, pero como desea aplicar un filtro, creo que es mejor usar el método de filtro integrado de Javascript.
const selectCity = getCities.filter((possibleCityName) => { return city.name === possibleCityName) });