React - 状态中的数组正在更新，但只有数组中的第一个对象被渲染到屏幕

Question

我正在尝试使用PokeAPI创建一个Web应用程序。

我的目标是从他们的类型加载一堆口袋妖怪。目前，我已将我的API网址硬编码为仅检索火种类型的口袋妖怪。但是，当我尝试使用数组将这些神奇宝贝渲染到屏幕时，只会渲染第一个火神奇宝贝（reference image）。

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
})