React.js中Map遍历API获取数据无法渲染页面问题求助

我帮你排查下问题，你的代码里有几个异步处理的关键错误，导致数据明明存在却没法渲染：

核心问题 #

1. 异步请求未等待就更新状态
   你在useEffect里循环调用getPokemonData，但fetch是异步操作——当你执行setPokemonList(tempPokemonArray)时，所有的请求还没完成，tempPokemonArray还是空的。之后你又清空了这个数组，这就导致状态被设置成了空数组，页面自然没内容。

2. 临时数组的错误使用
   tempPokemonArray是组件函数内部的变量，每次组件渲染都会重新创建。而且你直接修改它的内容，React无法追踪这种变化——只有通过setPokemonList更新状态，才能触发组件重新渲染。

3. 异步函数的不规范处理
   你给getPokemonData标记了async，但里面却用了then链式调用，没有用await等待请求完成，这会导致函数无法正确返回异步结果。

修复后的代码 #

import React, { useEffect, useState } from 'react';

const PokemonRender = () => {
  const [pokemonList, setPokemonList] = useState([]);

  // 修正：规范处理异步请求，返回Promise
  const getPokemonData = async (id) => {
    try {
      const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
      return await res.json();
    } catch (e) {
      console.log(e);
      return null; // 捕获错误，避免影响其他请求
    }
  };

  useEffect(() => {
    const fetchAllPokemon = async () => {
      // 收集所有请求的Promise
      const pokemonPromises = [];
      for (let i = 1; i < 5; i++) {
        pokemonPromises.push(getPokemonData(i));
      }
      // 等待所有请求完成，统一获取结果
      const results = await Promise.all(pokemonPromises);
      // 过滤掉请求失败的情况
      const validPokemons = results.filter(poke => poke !== null);
      // 更新状态，触发组件渲染
      setPokemonList(validPokemons);
    };

    fetchAllPokemon();
  }, []);

  return (
    <>
      <table>
        <tbody>
          {pokemonList.map(poke => (
            <tr key={poke.id}>
              <td>{poke.id}</td>
              <td>{poke.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

export default PokemonRender;

关键修正点 #

• 让getPokemonData用await处理fetch，正确返回异步结果，同时捕获错误避免影响全局请求。
• 在useEffect里用Promise.all等待所有请求完成后再更新状态，确保状态更新时已经拿到了所有数据。
• 不再依赖组件内部的临时数组，而是直接通过Promise结果更新状态，保证React能检测到状态变化并重新渲染页面。
• 移除了td上不必要的key属性——key只需要在循环的最外层元素（这里是tr）上设置唯一值即可。

内容的提问来源于stack exchange，提问作者GuyMate