hola chicos, no entiendo por qué recibo este error cuando quiero obtener una API de api.Covid19 y devuelve un objeto que contiene una matriz de países cada vez que quiero un mapa sobre los países, recibo este error y si obtengo una API de países por separado, funciona encontrar :| ayúdenme por favor ingresen la descripción de la imagen aquí
recorriendo datos.Países (esta es la sección de problemas)
y la imagen a continuación muestra lo que devuelve api: objeto devuelto por api
El estado data inicial es un objeto sin una propiedad de Countries definida, por lo que en el componente data.countries no está definido y arroja un error cuando intenta mapearlo.
El punto final https://api.covid19api.com/summary sí devuelve un objeto con una propiedad Countries .
/ 20211121231605 // https://api.covid19api.com/summary { "ID": "03b65afe-02ad-4835-abb5-9916c44bae85", "Message": "", "Global": { "NewConfirmed": 408370, "TotalConfirmed": 256947981, "NewDeaths": 5200, "TotalDeaths": 5144527, "NewRecovered": 0, "TotalRecovered": 0, "Date": "2021-11-22T06:09:08.91Z" }, "Countries": [ { "ID": "19a0f201-0385-42ee-bfec-cfe99666a87c", "Country": "Afghanistan", "CountryCode": "AF", "Slug": "afghanistan", "NewConfirmed": 32, "TotalConfirmed": 156896, "NewDeaths": 2, "TotalDeaths": 7365, "NewRecovered": 0, "TotalRecovered": 0, "Date": "2021-11-22T06:09:08.91Z", "Premium": { } }, ...
La solución parece ser proporcionar un estado inicial válido en el proveedor para lo que espera que todos los consumidores representen:
const [data, setData] = useState({ Countries: [] });O simplemente use null/checks/guard-clauses o el operador de encadenamiento opcional para protegerse contra los accesos nulos/indefinidos.
data.Countries && data.Countries.map(country => ( <h2 key={country.ISO2}> {country.Country} </h2> ))...
data.Countries?.map(country => ( <h2 key={country.ISO2}> {country.Country} </h2> ))