1

Soy nuevo en react y manejos de api. Decidi empezar a hacer una pokedex con una api (Pokeapi) pero resulta que no me reconoce mi .map. Les dejo el codigo:

  const url = "https://pokeapi.co/api/v2/pokemon?limit=10&offset=1"
  const [poke, setPoke] = useState()
  const pokeApi = async () => {
const response = await fetch(url)
console.log(response.statusText)
const responseJSON = await response.json()
setPoke(responseJSON)
    }

  useEffect(() => {
      pokeApi()
    }, [])

Acontinuación dejo mi return.

  return (
<div>
<h1>Pokedex</h1>
<ul>
{ !poke ? 'Cargando...' : 
poke.map( (poke,index)=>{
  return <li>{poke.name}</li>
})}
</ul>
</div>

);

Al fijarme en mi localhost aparece el siguiente error:

TypeError: poke.map is not a function

Si necesitan mas información me avisan y edito la consulta!

1
  • Puedes hacer un console.log(responseJSON ) para ver qué contenidos tiene? Justo antes del setPoke
    – FranAcuna
    Commented el 11 oct. 2021 a las 23:15

2 respuestas 2

1

es porque no hay ningun dato con el nombre name, el name que estas tratando de mapear esta dentro de un array results

tu problema se resuelve de esta manera

<ul>
  {!poke ? 'Cargando...' :
    poke?.results?.map((poke, index) => {
     return <li key={index}>{poke.name}</li>
  })}
</ul>
1
  • Ohhh entiendo, gracias bro! Commented el 11 oct. 2021 a las 23:30
1
import { useState, useEffect } from 'react';

const URI = "https://pokeapi.co/api/v2/pokemon?limit=10&offset=1"
const Component = () => {
    const [data, setData] = useState(null)
    useEffect(function(){
        fetch(URI)
        .then(response => {
            if(response.ok){
                response.json().then(data => setData(data))
            } else {
                // Error (Manejar error)
            }
        })
        .catch(e => {
            // Error (Manejar error)
        })
    }, [])
    return (
        <div>
            <h1>Pokedex</h1>
            {
                data && data.results ?
                    <ul>
                        {data.results.map((poke, index)=> <li key={index}>{poke.name}</li>)}
                    </ul>
                    
                :
                    <div>
                        <span>Cargando...</span>
                    </div>
            }
        </div>
    )
}

export default Component;

Me parece que de esta forma podrías ver un resultado diferente, no uses ¨async¨ si no es con un try-catch, porque la aplicacion se rompe facilmente, si solo es una peticion puedes utilizar una promesa.

Recuerda utilizar variables con nombres descriptivos y pegar todo el codigo para reproducirlo.

1
  • Ya uno comento y me lo soluciono. De igual manera se agradece las recomendaciones para fomentar las buenas practicas! :) Commented el 11 oct. 2021 a las 23:36

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.