0

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>
  );
}

1 respuesta 1

0

El problema esta en que las actualizaciones de estado en react no son inmediatas. Es decir se aplican al siguiente renderizado y no en el actual.

Asi deberia funcionarte:

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);
      return json;
    } catch (error) {
      console.log(`El pokemon ${pokemon} no existe o no ha sido encontrado`);
    }
  }

  async function searchPreEvolution(info) {
    try {
      const request = await fetch(
        `https://pokeapi.co/api/v2/pokemon-species/${info.id}/`
      );

      const json = await request.json();
      console.log(json);
    } catch (error) {
      console.log(error);
    }
  }

  async function findPokemon(pokemon) {
    setInfoPokemon(null);
    const info=await loadPokemon(pokemon);
    await searchPreEvolution(info);
  }

  return (
    <div className="pokeApp">
      <h1>PokeApp</h1>
      <PokeForm findPokemon={findPokemon} />
      {infoPokemon ? <PokeInfo info={infoPokemon} /> : ""}
    </div>
  );
}

O sino, tambien puedes hacer uso de los hooks para que cuando el valor del primer estado cambie, ahi si hagas el llamado a la segunda petición.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.