0

Buen día a todos, tengo un pequeño problema que no he podido resolver y que no se por que se produce.

En la consola me sale lo siguiente: TypeError: Cannot read property 'map' of undefined

El JSON es este :

[{

    "nombre": "Yosip",
    "apellido": "Parrado",
    "Edad": 22


},{

    "nombre": "Andrea",
    "apellido": "Vargas",
    "Edad": 12


},{

    "nombre": "Melisaa",
    "apellido": "Vacca",
    "Edad": 28


}


]

Y este es mi componente

const ListarFiguras = () =>{


    const[figuras,Setfiguras] = useState({})



    useEffect(()=>{

        ObtenerFiguras();


    },[]);


    function ObtenerFiguras(){

        const url = axios.get("http://localhost/Crud/crud-app/src/Data/Api_M.php");
        url.then(response =>{Setfiguras({isLoaded:true,
            items: response.data,})}).catch(ex =>{

            console.log("Error al obtener los datos"+ex);
        })
    }


    return(
    <Fragment>


        
       {figuras.items.map(items =>(

           <h1>{items.nombre}</h1>
       ))}

        
        </Fragment>
    );

}

Mi JSON origina era este, pero lo cambie a la otra estructura para probar pensando que el problema estaba en como estaba construido el JSON. pero no, me da el mismo problema

[{"Figura Elefante":"si,si,3,si,si,si,7,si,9,si,si,12,si,14,si,16,17,si,19,20,21,22,si,24,25"},{"Figura Elefante":"si,si,3,si,si,si,7,si,9,si,si,12,si,14,si,16,17,si,19,20,21,22,si,24,25"},{"Figura Tenedor":"si,si,si,si,si,si,7,si,9,si,si,12,si,14,si,16,si,si,si,20,21,si,si,si,25"}]

La idea es poder recorrer cada objeto del JSON y poder mostrar su información

1 respuesta 1

0

Tu error radica en que al realizar el primer renderizado la data aún no existe, y por eso obtienes ese error de undefined.

Lo que tienes que hacer primero es verificar si existe data:

{figuras.items
    ? figuras.items.map((items) => <h1>{items.nombre}</h1>)
    : ""}

Así evitas obtener dicho error.

1
  • Muchas gracias amigo, soy nuevo en esto y no sabia el por que el error, gracias a ti ahora ya se. Commented el 19 dic. 2020 a las 21:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.