0
465
ViewsReaccionar funcional: no se pueden leer las propiedades de la API indefinida. Acceso al niño
un poco de ayuda soy nuevo en React
Por qué useEffectworks bien, pero data.name renderiza bien, pero, por ejemplo, data.main.lat no tiene acceso, incluso con el mapa. Los datos en el niño que no puede obtener
Espero que esta pregunta tenga sentido 🙂
import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import axios from "axios"; const API_KEY = '' function Home() { const [data, setData] = useState([]); const location = useLocation(); let val = location.pathname.slice(1) useEffect(() => { axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${val}&appid=${API_KEY}`) .then((response) => { // console.log(response); setData(response.data) }).catch((error) => { // console.error("Error fetching data: ", error); // setError(error); }); }, []); return ( <div> <h2>Home</h2> <p>{data.name}</p> { data.main.map((i) => { <h1>{i.lat}</h1> }) } </div> ); };respuesta
{ base: "stations" clouds: all: 0 [[Prototype]]: Object cod: 200 coord: {lon: 2.3488, lat: 48.8534} dt: 1646247623 id: 2988507 main: feels_like: 281.92 humidity: 65 pressure: 1019 temp: 282.42 temp_max: 283.03 temp_min: 281.41 [[Prototype]]: Object name: "Paris" sys: country: "FR" id: 6550 sunrise: 1646202672 sunset: 1646242483 type: 1 [[Prototype]]: Object timezone: 3600 visibility: 10000 weather: Array(1) 0: {id: 800, main: 'Clear', description: 'clear sky', icon: '01n'} length: 1 [[Prototype]]: Array(0) wind: deg: 100 speed: 1.54 Cómo tengo acceso a <p> {data.coord.lat}</p> en la devolución. esto muestra el error Cannot read properties of undefined (reading 'lat')
3 answers
Answer question0
Cuando su componente se procesa por primera vez, data son una matriz vacía. Dado que las matrices no tienen una propiedad main , obtendrá un error porque está intentando usar una función de map de undefined .
lo que puedes hacer es
{ data?.main?.map((i) => ( <h1>{i.lat}</h1> )) } Que solo llamará a la función de map si data.main existe. Además, asegúrese de que data.main en su respuesta también sea una matriz; de lo contrario, el map no funcionará
0
- De acuerdo con el documento principal de la API de clima abierto, lo que está tratando de mapear es un objeto, no una matriz.
En lugar de un mapa, simplemente acceda a él como un objeto: <p>{data.coord.lat}</p>
- el elemento lat existe en coord no en el objeto principal.
3. La llamada a la API tarda un tiempo en proporcionar datos y está mapeando el estado que todavía está vacío cuando no hay respuesta de la API, tal vez pueda agregar el estado de carga cuando esté esperando una respuesta.
Demostración en vivo: https://codesandbox.io/s/awesome-engelbart-gxzqcd?file=/src/App.js
0
Puede intentar verificar data.main.length
{ data.main && data.main.map((i) => { <h1>{i.lat}</h1> }) }