Estoy tratando de obtener datos de una API y usar esos datos en mi aplicación. Pero el problema es que cuando trato de obtener un determinado objeto o datos del JSON que acabo de obtener de la API, obtengo un error de tipo: no se puede leer la propiedad 'país' de undefined. La propiedad SÍ existe. Por cierto, estoy usando React.js. Realmente aprecio su ayuda y orientación. Aquí está el código:
Aplicación.js
{typeof weather != 'undefined' ? ( <div> <div className="location-box"> <div className="location"> {weather.name},{weather.sys.country} </div> <div className="date"> {dateBuilder(new Date())} </div> </div> <div className="weather-box"> <div className="weather-temperature">15*C</div> <div className="weather">Sunny </div> </div> </div> ) : ("NULL")}Api desde donde vamos a buscar los datos.
function App() { const [query, setQuery] = useState(""); const [weather, setWeather] = useState({}); const Search = (evt) => { if (evt.key === "Entre") { debugger; fetch(`${api.base}weather?q=${query}&units=metric&APPID${api.key}`) .then((res) => res.json()) .then((result) => { setWeather(result); setQuery(""); console.log(result); }); } }; }Si está seguro de que la propiedad existe, entonces debe ser el renderizado inicial. Inicializas useStaet con {} pero te proteges contra undefined . Así que cambia useState({}) a useState() .
const [weather, setWeather] = useState(); También puede agregar un cheque nulo cuando lea country .
{weather.name}, {weather.sys?.country}El problema se debe a su verificación del clima: typeof weather != 'undefined' mientras que su valor inicial de tiempo es {} . Para resolver el problema, no establezca el valor inicial para el clima. como esto:
const [weather, setWeather] = useState(); Entonces, en el primer renderizado, el valor del clima no estará undefined y en el siguiente renderizado contiene su respuesta API.