React/Axios 基于键/值合并多个对象数组

Question

使用 Axios 抓取数据以构建 Pokedex 并基于不同的 API 调用，我想将来自两个或三个调用的数据合并到 on。拨打电话，我目前有：

const [species, setSpecies] = useState([]);
const [types, setTypes] = useState([]);
const [sprites, setSprites] = useState([]);
const [pokemon, setPokemon] = useState();

axios.get('https://pokeapi.co/api/v2/pokemon-species?limit=151')
  .then(res => {
    return axios.all(res.data.results.map(p => axios.get(p.url)));
  })
  .then(res => {
    setSpecies(res.map(p => p.data));
        
    return axios.all(res.map(s => axios.get(s.data.varieties[0].pokemon.url)));
  }).then(res => {
    setTypes(res.map(t => t.data.types));
    setSprites(res.map(s => s.data.sprites.front_default));
  });

我不知道是否有更简单/更好的方法，但我希望 setPokemon 将来自物种、类型和精灵的信息全部通过 id 合并。

提前感谢任何帮助/建议！

Answer 1

async function getPokemonData() {
  
  
  const pokemonData = await axios.get(
    "https://pokeapi.co/api/v2/pokemon-species?limit=151"
  ); // 1
  let species = [];
  let types = [];
  let sprites = [];
  
  
  if (pokemonData) {
    const res2 = await axios.all(pokemonData.data.results.map((p) => axios.get(p.url)));
    
    if (res2) {
      species = res2.map((p) => p.data);
      const res3 = await axios.all(
        res2.map((s) => axios.get(s.data.varieties[0].pokemon.url))
      );
      
      if (res3) {
        let finalData = [...species];
        
        finalData = res3.map((elem, index) => {
          return {
            ...finalData[index],
            types: elem.data.types,
            sprites: elem.data.sprites.front_default,
          };
        });
        
        console.log(finalData);
        // now you should setState
        // setFinalData(finalData) 
      }
    }
  }
}


getPokemonData()

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha512-VZ6m0F78+yo3sbu48gElK4irv2dzPoep8oo9LEjxviigcnnnNvnTOJRSrIhuFk68FMLOpiNz+T77nNY89rnWDg==" crossorigin="anonymous"></script>

你觉得它更好吗？我不确定，但使用这段代码，我只设置一次状态，这肯定会更好。我也将异步等待用于同步流。但是再次使用异步等待取决于您。