React应用中Axios异步数据顺序渲染问题解析与优化

// collectPokemon 函数
const collectPokemon = async (limit: number) => {
  axiosInstance.get(`pokemon?limit=${limit}`).then((res) => {
    const data = res.data.results; // data 是一个包含 {name, url} 的数组

    // 错误用法：Promise.all(data) - data 并非 Promise 数组
    Promise.all(data).then((results) => {
      results.map((pkmn) => {
        mapPokemon(pkmn.name); // 调用 mapPokemon，但其返回的 Promise 未被收集
      });
    });
  });
};

// mapPokemon 函数
const mapPokemon = async (name: string) => {
  axiosInstance.get(`pokemon/${name}`).then((res) => {
    const data: PokemonType = res.data;
    // 问题所在：在循环中多次更新状态
    setPokedex((currentList) => [...currentList, data]);
  });
};

import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";
import { PokemonType } from "./models/pokemonType";
import Pokemon from "./components/Pokemon";

function App() {
  const [pokedex, setPokedex] = useState<PokemonType[] | []>([]);
  const limit = 151;

  const axiosInstance = axios.create({
    baseURL: "https://pokeapi.co/api/v2/",
  });

  useEffect(() => {
    // 在组件挂载时调用 collectPokemon
    collectPokemon(limit);
  }, []); // 空数组依赖表示只在挂载时运行一次

  /**
   * 收集指定数量的宝可梦数据
   * @param limit 要收集的宝可梦数量
   */
  const collectPokemon = async (limit: number) => {
    try {
      // 1. 获取宝可梦列表（包含名称和URL）
      const res = await axiosInstance.get(`pokemon?limit=${limit}`);
      const results = res.data.results; // results 是一个包含 {name, url} 的数组

      // 2. 为每个宝可梦发起详细信息请求，并收集所有这些请求的 Promise
      // mapPokemon 现在应该返回 Promise<PokemonType>
      const promises = results.map((pkmn: { name: string; url: string }) =>
        mapPokemon(pkmn.name)
      );

      // 3. 使用 Promise.all 等待所有详细信息请求完成
      // pokemons 将是一个包含所有 PokemonType 对象的有序数组
      const pokemons = await Promise.all(promises);

      // 4. 一次性更新状态，确保数据顺序正确
      setPokedex(pokemons);
    } catch (error) {
      console.error("Failed to collect Pokemon data:", error);
      // 可以在这里处理错误，例如显示错误消息给用户
    }
  };

  /**
   * 获取单个宝可梦的详细信息
   * @param name 宝可梦的名称
   * @returns 返回一个 Promise，解析为 PokemonType 对象
   */
  const mapPokemon = async (name: string): Promise<PokemonType> => {
    const res = await axiosInstance.get(`pokemon/${name}`);
    return res.data; // 直接返回获取到的数据
  };

  console.log(pokedex);

  return (
    <>
      <h1>Pokédex App</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 m-10">
        {pokedex.map((mon: PokemonType) => (
          <Pokemon key={mon.id} name={mon.name} id={mon.id} types={mon.types} />
        ))}
      </div>
    </>
  );
}

export default App;

import { PokemonType } from "../models/pokemonType";

const Pokemon = (props: PokemonType) => {
  const { name, id, types } = props;
  const paddedIndex = ("000" + (id ? id : id)).slice(-3);

  return (
    <div className="bg-gray-600 rounded-2xl p-2 transform h-180 min-w-250 transition duration-500 hover:scale-180 hover:drop-shadow-[0_10px_10px_rgba(0,0,0,.5)] border-gray-950 border-4 overflow-clip">
      <div className="bg-gray-900 text-white rounded-xl p-2 w-20 text-center absolute top-2 right-2 font-pokemonGB border-white border-2">
        #{paddedIndex}
      </div>
      <img
        // key 属性应该放在列表渲染的顶级元素上，而不是 img 标签上
        // 这里 img 标签的 key 是多余的，但不会引起错误
        key={id} 
        className="scale-125 relative"
        width={150}
        height={150}
        alt={name}
        src={`https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${paddedIndex}.png`}
      />
      <div className="font-pokemonGB text-black bg-white w-auto text-sm text-center capitalize rounded-tl-2xl p-2 absolute right-0 bottom-0 slant-x-[30deg] border-gray-950 border-4 -m-1">
        {name}
      </div>
      <div
        // key={Math.random()} 在这里是错误的用法，每次渲染都会生成新的 key
        // 应该使用 item.type?.name 或 item.type?.id 作为 key
        key={Math.random()} 
        className=" flex flex-row fixed right-2 top-16 space-x-3"
      >
        {types?.map((item) => (
          // 这里的 key 也应该是一个稳定值
          <div key={item.type?.name} className="bg-red-500 rounded-lg p-2 capitalize border-gray-950 border-2 ">
            <p>{item.type?.name}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Pokemon;