1

Boa tarde. Tenho o seguinte trecho de código:

import React,{Component} from 'react';
import './App.css';

class App extends Component {
    constructor(){
    super();
    this.state={
      pokemonList : []
    }
  }

  componentDidMount(){
    fetch("https://pokeapi.co/api/v2/pokemon")
      .then(response => response.json())
      .then(data => this.setState({pokemonList: data}))
  }

  render (){
    const pokemonList = this.state;
    return(
      <div>
        <h1>{pokemonList.map(pkmn => <div>{pkmn.name}</div>)}</h1>
      </div>
    )
  };
}

export default App;

Que resulta no erro apresentado na descrição da pergunta. Alguém sabe a causa?

1 Resposta 1

2

Visualize os dados que essa API está retornando. O retorno tem o seguinte formato:

{
  count: number,
  next: string | null,
  previous: string | null,
  results: {
      name: string,
      url: string
  }[]
}

Você deveria estar invocando o método map na propriedade results. Outro detalhe é que você inicializou a variável pokemonList com o valor de this.state, e não this.state.pokemonList

O código deveria estar dessa forma:

componentDidMount() {
  fetch("https://pokeapi.co/api/v2/pokemon")
    .then(response => response.json())
    .then(data => this.setState({pokemonList: data.results}))
}

render () {
  const {pokemonList} = this.state;
  return( 
    <div>
      <h1>{pokemonList.map(pkmn => <div key={pkmn.name}>{pkmn.name}</div>)}</h1>
    </div>
  )
};

É claro, também seria interessante você salvar no seu state os valores de count, next e previous.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .