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>

您觉得更好吗？我不确定，但是使用此代码，我只能设置一次状态，这肯定会更好。我正在使用异步等待也用于同步流。但是再次使用异步等待由您决定。

React / Axios根据键/值合并多个对象数组

1 个答案: