我可以获取多个 API 并在 api 调用之间设置状态吗？ （反应和 axios）

Question

我想获取 api 并设置状态，然后使用来自第一个状态的状态获取另一个 api。 那可能吗？

这是我挣扎的代码；

 useEffect(()=>{

    const fetchPokemonSpecies =  async (pokemon) => {

        const data = await axios("https://pokeapi.co/api/v2/pokemon-species/"+pokeName).then( (response) => 
         axios(response.data.evolution_chain.url)).then((response) => {setPokemonFirstEvolution(response.data.chain.evolves_to[0].species.name)
        setPokemonFirstForm(response.data.chain.species.name)

        setPokemonSecondEvolution(response.data.chain.evolves_to[0].evolves_to[0].species.name)})
        setPokemonSpecies(data)
        setPokemonCategory(data.genera[7].genus)

    } 

已经谢谢了！

Answer 1

所以我就是这样解决我的问题；

     const [pokemonCategory, setPokemonCategory] = useState([])
    const [pokemonSecondEvolution, setPokemonSecondEvolution] = useState([])
    const [pokemonFirstEvolution, setPokemonFirstEvolution] = useState([])
   const [pokemonFirstForm, setPokemonFirstForm] = useState([])
   const [pokemonFirstFormIcon, setPokemonFirstFormIcon] = useState([])
   const [pokemonFirstEvoIcon, setPokemonFirstEvoIcon] = useState([])
  const [pokemonSecondEvoIcon, setPokemonSecondFormIcon] = useState([])
 
    useEffect(()=>{
        const fetchPokemonSpecies =  async (pokemon) => {
            const data = await axios("https://pokeapi.co/api/v2/pokemon-species/"+pokeName).then( (response) => response.data)
            setPokemonSpecies(data)
            setPokemonCategory(data.genera[7].genus)

            const data2 = await axios(data.evolution_chain.url).then((response) => axios("https://pokeapi.co/api/v2/pokemon/"+response.data.chain.evolves_to[0].species.name))

            setPokemonFirstEvoIcon(data2.data.sprites.other.dream_world.front_default)
            const data3 = await axios(data.evolution_chain.url).then((response) => axios("https://pokeapi.co/api/v2/pokemon/"+response.data.chain.evolves_to[0].evolves_to[0].species.name))
            setPokemonSecondFormIcon(data3.data.sprites.other.dream_world.front_default)

            const data4 = await axios(data.evolution_chain.url).then((response) => axios("https://pokeapi.co/api/v2/pokemon/"+response.data.chain.species.name))
            setPokemonFirstFormIcon(data4.data.sprites.other.dream_world.front_default)
            
        } 
    fetchPokemonSpecies()
   
    },[])
    useEffect(()=>{
    const fetchPokemonEvoChain =  async (pokemon) => {
        const data = await axios("https://pokeapi.co/api/v2/pokemon-species/"+pokeName).then( (response) => 
         axios(response.data.evolution_chain.url)).then((response) => {setPokemonFirstEvolution(response.data.chain.evolves_to[0].species.name)
        setPokemonFirstForm(response.data.chain.species.name)
        setPokemonSecondEvolution(response.data.chain.evolves_to[0].evolves_to[0].species.name)})

    } 
fetchPokemonEvoChain()

},[])

idk，如果它是最佳方式，但它有效