0
283
Vistas"Error de tipo no detectado: no se pueden leer las propiedades de undefined (leyendo FetchApi.js:23 'data')" al actualizar la página
Cuando el código se ejecuta por primera vez, son datos de mapeo como yo quería. Pero cuando actualizo la página , muestra un error. ¿Alguien sabe cómo puedo solucionar este error y qué lo causa?
El código
import React, { useEffect, useState } from 'react'; import axios from 'axios'; const FetchApi = () => { const [items, setItems] = useState(); useEffect(() => { getUser(); }, []) async function getUser() { try { const response = await axios.get('https://datausa.io/api/data?drilldowns=Nation&measures=Population'); setItems(response.data.data) return items; } catch (error) { console.error(error); } } return ( <div> { items.map(item => ( <li key={item.Year}> {item.Nation} </li> )) } </div> ) } export default FetchApiSalida cuando se ejecuta por primera vez
Error al actualizar la página
1 Respuestas
Responde la pregunta0
Encontré el problema.
El problema era que "elementos" no está definido en su estado predeterminado. Debería ser
const [items, setItems] = useState([]);Y creo que la razón por la que este error se muestra solo cuando se actualiza la página fue,
cuando cambio el código y lo guardo, cambia la vista html automáticamente, pero el navegador solo lee los códigos JavaScript modificados, por lo que const [items, setItems] = useState(); la línea nunca se lee al principio.
Pero cuando actualizo la página, el código se ejecuta desde el principio y detecta que "elementos" no está definido y muestra el error.