Realmente estoy atascado en un problema: si ejecuta el código a continuación, obtendrá un error "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'mapa')".

Cuando la consola cierra la sesión de la variable "elementos", obtengo 2 resultados como se muestra aquí:

El problema radica en el primer resultado, ya que está vacío. Pero, ¿alguien puede explicarme por qué este resultado está vacío y por qué produce 2 resultados?

Este código se tomó directamente de aquí y se modificó para adaptarse a lo que devuelve la API. Considere ejecutar este código para que pueda ver lo que quiero decir.

 import React, {useState, useEffect} from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [items, setItems] = useState([]); useEffect(() => { fetch("http://www.7timer.info/bin/api.pl?lon=113.17&lat=23.09&product=astro&output=json") .then(res => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); }, // Note: it's important to handle errors here // instead of a catch() block so that we don't swallow // exceptions from actual bugs in components. (error) => { setIsLoaded(true); setError(error); } ) }, []) if (error) { return <div>Error: {error.message}</div>; } else if (!isLoaded) { return <div>Loading...</div>; } else { return ( <ul> {items.dataseries.map(item => ( {console.log(item)} ))} </ul> ); } } export default App;