React - массив в состоянии обновляется, но на экран выводится только первый объект в массиве

Question

Я пытаюсь создать веб-приложение с PokeAPI.

Моя цель - загрузить кучку покемонов из их типа.В настоящее время я жестко закодировал свой URL-адрес API, чтобы получать только покемонов типа fire.Однако, когда я пытаюсь отрисовать этих покемонов на экране с помощью массива, рендерится только первый огненный покемон ( эталонное изображение ).

import React, { Component } from 'react';
import './App.css';
import PokemonRow from './PokemonRow.js'
import $ from 'jquery';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {rows: []};
    this.performSearch()
  }

  performSearch() {
    var pokemonRows = [];
    const urlString = "http://pokeapi.salestock.net/api/v2/type/fire/";
    $.ajax({
      url: urlString,
      success: (searchResults) => {
        console.log("Fetched Data Succesfully");
        console.log(searchResults);

        const pokemonOfType = searchResults.pokemon;



        pokemonOfType.forEach(pokemon => {
          //console.log(pokemon.pokemon.name);
          const pokemonURL = pokemon.pokemon.url;
          $.ajax({
            url: pokemonURL,
            success: (pokemonFromArray) => {
              console.log(pokemonFromArray);
              let pokemonObject = <PokemonRow key={pokemonFromArray.id} pokemon={pokemonFromArray} />;
              //console.log(pokemonObject);
              pokemonRows.push(pokemonObject);
              console.log("pokemonRows.length: " + pokemonRows.length);
              this.setState({
                rows: pokemonRows
              })
              console.log("this.state.rows.length: " + this.state.rows.length);
            }
          })


          //console.log(pokemonRows);
        })
      },
      error: (xhr, status, err) => {
        console.error("Failed to fetch data");
      }
    });
  }

  render() {
    return (
      <div className="App">
        <table className = "titleBar">
          <tb>
            <tr>
              <td>
                <img width="50" src="pokemon.png" alt="Pokemon logo"/>
              </td>
              <td>
                Pokemon Information
              </td>
            </tr>
          </tb>
        </table>

        <input className = "searchBar" placeholder="Enter Pokemon Name" />
        {this.state.rows}
      </div>
    );
  }
}

export default App;

import React from 'react'

class PokemonRow extends React.Component {
  render() {
    return (
      <table key={this.props.pokemon.id}>
        <tbody>
          <tr>
            <td>
              {this.props.pokemon.name}
            </td>
          </tr>
          <tr>
            <td>
              <img alt="pokemon_image" width="120" src={this.props.pokemon.sprites.front_default} />
            </td>
            <td>
              <h3>Stats</h3>
              <p>Height: {this.props.pokemon.height} ft</p>
              <p>Weight: {this.props.pokemon.weight} lbs</p>

            </td>
          </tr>
        </tbody>
      </table>
    );

  }
}

export default PokemonRow;

Answer 1

Вы должны перебрать массив:

this.state.rows.map(function(row) {
  return row
})