0

estoy intentando mostrar por pantalla el nombre de 151 Pokémon que obtengo mediante una API, el código es el siguiente:

Codigo actualizado con la respuesta de Dev. Joel:

import React, { Component } from 'react'
import axios from 'axios'

class HomeContainer extends Component {
    componentDidMount() {
        axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151&offset=151') //Solicitud api
            .then(({result}) => {
              //  console.log('aaa', result.data.results[0])
                crearCarta(result)
            })
            .catch(error => {
                console.log(error) //Solicitud error
            })
    }


    render() { //Renderizamos el html
        return (
            <div>
            <div className="navbar"></div>
            <header id="container"></header>
            </div>
            );
    }

}
function crearCarta(pokemons) {
    console.log('Dentro de Crear Carta -->   ', pokemons)
    const container = document.getElementById('container')
    console.log( 'Llamado a la API dentro de crearCarta' ,pokemons)

pokemons.forEach(id => {
        container.innerHTML += 
        ` 
        <header id="container">
        <h1>${pokemons.data.results[id].name}</h1>
        </header> 
        `
    }); 
}



export default HomeContainer

El problema es que me sale un error de forEach diciendo que no es una función, no entiendo el por que y no logro solucionarlo. ¿A qué se debe este problema?

Gracias

4
  • ¿Cuál es el contenido de pokemons? Asegúrate de que el contenido sea lo que estás esperando. Si es posible, comparte lo que obtienes en pokemons dentro de la función crearCarta(). Commented el 19 may. 2021 a las 5:01
  • El contenido de pokemons es el result, fijate que cuando llamo a la funcion desde la clase, le paso por parametro result Commented el 19 may. 2021 a las 5:28
  • Eso lo tenía claro, a lo que me refería es que pusieras un console.log() de dicha variable dentro de la función para asegurar que el contenido de la misma es un array -o al menos que contiene algún dato-. Commented el 19 may. 2021 a las 5:55
  • Dale lo hare! Muchas gracias, a veces se me olvida el hecho de testear todo Commented el 19 may. 2021 a las 6:05

2 respuestas 2

1

El problema está en que estás haciendo mal la desestructuración. Axios retorna un response, y los datos de la respuesta los encuentras en data... data contiene la respuesta de la api... y la lista de pokemons está en el elemento results por lo tanto. la destructuración correcta sería

axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151&offset=151') //Solicitud api
.then(({data: {results: pokemons}}) => {
    console.log(pokemons);
    //crearCarta(pokemons);
})
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Lo otro que veo es que crear carta recibe la lista de los pokemons, por lo tanto deberías cambiarla así

pokemons.forEach(pokemon => {
    //cada pokemon tiene la propiedad name y url
    container.innerHTML += 
    ` 
    <header id="container">
    <h1>${pokemon.name}</h1>
    </header> 
    `
}); 
2
  • Hola Pipe gracias por tu respuesta, y si quisiera manipular tambien las imagenes que me ofrece la API como lo tendria que hacer? Commented el 21 may. 2021 a las 0:32
  • Solo debes agregar un elemento <img src="${pokemon.url}" />
    – Pipe
    Commented el 21 may. 2021 a las 13:32
1

Tienes más de 1 error en el código.

  1. El valor retornado de tu petición result , es un objeto más no un array. Por lo cuál cuando intentas iterarlo con un forEach es imposible porque dicho método es propio de los arrays.
  2. Al iterar en cada elemento, asignas (=) al innerHTML, más no añades (+=), tal cuál solo mostraría por pantalla el último registro (última iteración, ultima asignación)

Solución.

  1. Puede utilizar desestructuración para obtener el valor interno de data .then(({data}) => {...} y enviaría al método crearCarta(data.results)

    axios.get('...')
    .then(({data}) => {
        crearCarta(data.results)
     })
    
  2. Añadir el contenido al innerHTML haciendo uso de +=

    pokemons.forEach(el => {
        container.innerHTML +=
        ` 
        <header id="container">
        <h1>${el.name}</h1>
        </header> 
        `
    }); 
    

Se puede mejorar el código pero esto debería solucionar el problema.

6
  • Hola Joel, muchas gracias por tu respuesta y tu explicación, aprendí mucho y leí los artículos, pero el problema no fue resuelto y no entiendo el por que, esto me esta volviendo loco, voy a actualizar el código que subí. Commented el 19 may. 2021 a las 6:14
  • Me acabo de dar cuenta que me sale otro error, el cual es: forEach of Undefined Commented el 19 may. 2021 a las 6:16
  • Le agrege un let variable = pokemons.forEach(id => { ........ pero sigue saliendo el error Commented el 19 may. 2021 a las 6:17
  • @HatoriHanso según su pregunta editada, estoy 100% seguro que no ha leído mi respuesta porque ninguna de las dos correcciones está. (hay código que no he colocado en mi respuesta)
    – Dev. Joel
    Commented el 19 may. 2021 a las 6:19
  • A decir verdad no entiendo por que pasaste a la funcion crearData por parametro data.results, yo tengo result en el .then, deberia pasar solo .result? Commented el 19 may. 2021 a las 21:54

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.