0

Hola soy nuevo en React y estoy realizando un proyecto con hooks. El problema se presenta al tratar de recorrer un array que obtengo desde una API (pokeapi). Cuando obtengo la respuesta fetch la guardo a travez de useState. Ahora si quiero mostrar alguna propiedad del objeto no hay problema, pero si quiero recorrer una lista dentro del objeto me lanza el error "Cannot read property 'map' of undefined"

import React, { Fragment, useState, useEffect } from 'react'
import {useParams} from 'react-router-dom'

export default function Pokemon() {

    let pokemonName = useParams().name

    const [pokemon, setPokemon] = useState([])

    useEffect(() => {
        const jsonPokemon = async () => {
            const pokemonData = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`)
            const pokemonJson = await pokemonData.json()
            setPokemon(pokemonJson)
        }
        jsonPokemon()
    }, [pokemonName])

    return (
        <Fragment>

        <h2>{pokemon.name}</h2>
        <h3>{pokemon.id}</h3>

        <ul>
            {
                pokemon.stats.map(value => (
                    <li>
                        {value.base_stat}
                    </li>
                ))
                
            }
        </ul>
        </Fragment>
    )
}

Un ejemplo del objeto que intento mostrar: https://pokeapi.co/api/v2/pokemon/bulbasaur Especificamente la propiedad stats Gracias

0

2 respuestas 2

1

El problema es por el primer render y en la inicialización de la variable pokemon.

Primero que todo tienes que cambiar el valor por default que le estas pasando al useState de un array vacio a un objeto vacio, ya que la respuesta del endpoint es un objeto con la información del pokemon.

Para solucionar el error, tienes que validar que la propiedad stats exista en el objeto pokemon, ya que en el primer render, la variable pokemon es un objeto vacio y no tiene la propiedad stats.

0

Tendrias que validar que tu objeto contenga stats, y que stats tenga elementos.

{
    (pokemon.stats != null && pokemon.stats.length > 0)
    ?
    pokemon.stats.map(value => (
        <li key={value}>
            {value.base_stat}
        </li>
    ))
    :
    (<li>No existen datos</li>)
}

Agrego también key={value} en el li, ya que react lo requiere, caso contrario también te saldría un mensaje de advertencia.

1
  • Perfecto, fue un error de concepto, tenia entendido que por ejemplo con un AWAIT en un FETCH, se espera a recibir todos los datos antes de seguir, por lo tanto "no era necesario validar si los tenia", y lo podia recorrer sin problema. Veo que no es asi, podrias explicarme bien como funciona ¿O esto se comporta asi solo en el state en React?
    – Carlos
    el 20 mar. 2020 a las 11:51

Tu Respuesta

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

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