React嵌套Axios请求导致Pokemon卡片类型无法更新求助

核心问题原因 #

你遇到的问题本质是异步请求的闭包陷阱，或是状态更新未基于最新值，导致渲染时无法获取正确的类型数据。虽然控制台能打印类型，但状态更新逻辑错误，无法同步到组件渲染中。

解决方案1：用Promise.all批量处理异步请求（推荐） #

先获取宝可梦基础列表，再批量请求每个宝可梦的详情，等所有请求完成后一次性更新状态，避免多次更新和闭包问题：

// 假设是React组件中的状态和副作用逻辑
const [pokemons, setPokemons] = useState([]);

useEffect(() => {
  // 获取宝可梦列表
  axios.get('https://pokeapi.co/api/v2/pokemon?limit=10')
    .then(listRes => {
      // 为每个宝可梦创建详情请求的Promise
      const detailPromises = listRes.data.results.map(pokeItem => 
        axios.get(pokeItem.url).then(detailRes => ({
          id: detailRes.data.id,
          name: detailRes.data.name,
          // 提取类型名称
          types: detailRes.data.types.map(typeInfo => typeInfo.type.name)
        }))
      );

      // 等待所有详情请求完成后更新状态
      Promise.all(detailPromises)
        .then(fullPokemonData => {
          setPokemons(fullPokemonData);
        })
        .catch(err => console.error('请求失败:', err));
    })
}, []);

渲染卡片时直接从pokemons数组取类型：

{pokemons.map(pokemon => (
  <div key={pokemon.id} className="pokemon-card">
    <h2>{pokemon.name}</h2>
    <div className="type-tags">
      {pokemon.types.map(type => (
        <span key={type} className={`type-${type}`}>{type}</span>
      ))}
    </div>
  </div>
))}

解决方案2：函数式更新状态（逐个请求场景） #

如果必须逐个处理请求，要使用函数式状态更新，确保每次更新都基于最新的状态值，避免闭包导致的旧状态覆盖：

const [pokemons, setPokemons] = useState([]);

useEffect(() => {
  axios.get('https://pokeapi.co/api/v2/pokemon?limit=10')
    .then(listRes => {
      listRes.data.results.forEach(pokeItem => {
        axios.get(pokeItem.url)
          .then(detailRes => {
            const newPokemon = {
              name: pokeItem.name,
              types: detailRes.data.types.map(t => t.type.name)
            };
            // 用函数式更新，获取最新的prevPokemons状态
            setPokemons(prevPokemons => [...prevPokemons, newPokemon]);
          })
      })
    })
}, []);

关键注意点 #

• 不要在循环中直接依赖当前状态值更新（比如setTypes([...types, newType])），闭包会捕获初始状态，导致每次更新都基于旧值，最终状态混乱。
• 批量请求用Promise.all更高效，也能保证数据完整性，避免卡片分批渲染的闪烁问题。

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