Блог

Я новичок в react / веб-разработке и попробовал свой первый проект. Для начала я хочу только перечислить всех покемонов из JS object в <li> . Я не могу понять, что не так. ошибки нет.

Это мой код:

 import React from "react";
import "./App.css";

var Pokedex = require("pokedex-promise-v2");
var P = new Pokedex();

class PokemonsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { pokemonList: [] };
    this.retrievePokemonList = this.retrievePokemonList.bind(this);
  }

  retrievePokemonList() {
    P.getPokemonsList()
    .then(function (response) {
      const listItems = response.results.map((d) => <li key={d.name}>{d.name}</li>);
      this.setState({
        pokemonList: listItems
      })
    })
    .catch(function(error) {
      console.log(error);
    });
  }

  render() {
    //const listItems = response.results.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div onLoad={this.retrievePokemonList}>
        <h1>test</h1>
        <div>{this.state.pokemonList}</div>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <PokemonsList></PokemonsList>
      </header>
    </div>
  );
}

export default App;
  

В веб-консоли (F12) это: Unchecked runtime.lastError: The message port closed before a response was received.

Где моя ошибка? Как я могу отобразить всех этих покемонов. Заранее спасибо

Вот исправленный ваш код:

 import React from 'react';
import PokedexLib from 'pokedex-promise-v2';

class PokemonsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { pokemonList: [] };
    this.Pokedex = new PokedexLib();
  }

  componentDidMount() {
    this.Pokedex.getPokemonsList()
      .then(response => {
        this.setState({
          pokemonList: response.results,
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        <h1>Pokemon List</h1>
        <div>
          {this.state.pokemonList.map(pokemon => (
            <li key={pokemon.name}>{pokemon.name}</li>
          ))}
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div className='App'>
      <header className='App-header'>
        <PokemonsList></PokemonsList>
      </header>
    </div>
  );
}
export default App;

  

Пожалуйста, обратите внимание на 2 вещи: все вызовы API лучше выполнять в методе componentDidMount, а другое дело, что вы можете отобразить список внутри метода render с помощью метода map .. с уважением