Tengo una proyecto en React en el que recibo datos de una API usando una función asíncrona, hasta ahí funciona, pasa que usando esos datos que recibo, quiero hacer una segunda petición, pero, parece que la segunda petición se ejecutase antes de la primera. Cuando busco la información en mi función searchPreEvolution recibo un error que dice que infoPokemon es nulo, pero si sin recargar la página hago de nuevo otra consulta, llegan los datos de la primera búsqueda.
import PokeForm from "./pokeForm";
import PokeInfo from "./pokeInfo";
export default function PokeApp() {
const [infoPokemon, setInfoPokemon] = useState(null);
const [preEvolution, setEvolution] = useState(null);
async function loadPokemon(pokemon = "pikachu") {
try {
const request = await fetch(
`https://pokeapi.co/api/v2/pokemon/${pokemon}`
);
const json = await request.json();
setInfoPokemon(json);
} catch (error) {
console.log(`El pokemon ${pokemon} no existe o no ha sido encontrado`);
}
}
async function searchPreEvolution() {
try {
const request = await fetch(
`https://pokeapi.co/api/v2/pokemon-species/${infoPokemon.id}/`
);
const json = await request.json();
console.log(json);
} catch (error) {
console.log(error);
}
}
async function findPokemon(pokemon) {
setInfoPokemon(null);
await loadPokemon(pokemon);
await searchPreEvolution();
}
return (
<div className="pokeApp">
<h1>PokeApp</h1>
<PokeForm findPokemon={findPokemon} />
{infoPokemon ? <PokeInfo info={infoPokemon} /> : ""}
</div>
);
}