import Info from "./components/Info"; import Search from "./components/Search"; import axios from "axios"; import { useEffect, useState } from "react"; const App = () => { const API_KEY = `<REDACTED>` const baseURL = `http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=` const [weatherData, setWeatherData] = useState({}) const [search, setSearch] = useState('London') const [error, setError] = useState('') useEffect(() => { axios.get(`${baseURL + search}`) .then(resp => { setWeatherData(resp.data) }) .catch(error => setError(error.message)) }, [search]) console.log(weatherData.location.name); return ( <div className="App"> <h1 style={{ textAlign: 'center', marginBottom: '2rem' }}>{error}</h1> <Search setSearch={setSearch} /> <div className="container"> <Info weatherData={weatherData} /> </div> </div> ); } export default App;

Estoy tratando de crear una aplicación meteorológica en reaccionar. Estoy usando la API meteorológica que puedes ver en el código (tal vez también deberías echarle un vistazo a la estructura de la API). Cuando registro en la consola weatherData.location , obtengo los datos meteorológicos normales. Pero cuando pruebo weatherData.location.name me sale el error que dice: Uncaught TypeError: Cannot read properties of undefined (reading 'name') . Empecé a aprender React hace dos semanas, así que todavía soy un principiante... Gracias.