React+Axios能否实现多API请求并在请求间传递状态？

完全可行，但你的代码存在逻辑错误，导致无法正确实现预期效果，下面是具体分析和修正方案：

你的代码问题点 #

1. 混用async/await和.then()，导致data变量拿到的是第二个进化链请求的结果，而非第一个宝可梦物种请求的数据，后续setPokemonSpecies(data)和setPokemonCategory(data.genera[7].genus)会因为数据结构不匹配报错。
2. 函数定义了pokemon参数但未使用，反而依赖外部的pokeName，可能引发作用域相关问题。
3. 没有错误处理和数据容错，一旦请求失败或部分宝可梦没有二阶进化，会直接抛出错误导致程序崩溃。

修正后的代码 #

useEffect(() => {
  const fetchPokemonSpecies = async () => {
    try {
      // 第一步：调用第一个API获取宝可梦物种数据，设置基础状态
      const speciesRes = await axios(`https://pokeapi.co/api/v2/pokemon-species/${pokeName}`);
      const speciesData = speciesRes.data;
      
      setPokemonSpecies(speciesData);
      setPokemonCategory(speciesData.genera[7].genus);

      // 第二步：用第一个请求返回的进化链URL调用第二个API
      const evolutionRes = await axios(speciesData.evolution_chain.url);
      const evolutionData = evolutionRes.data;

      // 设置进化相关状态，同时做容错处理
      setPokemonFirstForm(evolutionData.chain.species.name);
      const firstEvolve = evolutionData.chain.evolves_to[0];
      if (firstEvolve) {
        setPokemonFirstEvolution(firstEvolve.species.name);
        const secondEvolve = firstEvolve.evolves_to[0];
        setPokemonSecondEvolution(secondEvolve ? secondEvolve.species.name : null);
      } else {
        setPokemonFirstEvolution(null);
        setPokemonSecondEvolution(null);
      }
    } catch (err) {
      console.error("请求过程出错：", err);
      // 这里可以添加错误提示的状态设置，比如setErrorMsg("加载失败")
    }
  };

  fetchPokemonSpecies();
}, [pokeName]); // 依赖pokeName，名称变化时自动重新请求

关键说明 #

• 用async/await线性编写流程，确保先完成第一个请求并设置状态，再执行第二个请求，逻辑清晰易维护。
• 加入try/catch捕获请求错误，避免程序崩溃。
• 对进化链的嵌套结构做容错判断，适配没有进化分支的宝可梦数据。
• useEffect依赖数组添加pokeName，保证查询目标变化时重新发起请求。

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