Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Consumo de APIs con fetch: PokeApi

5/17
Recursos

Aportes 8

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

En estos casos, lo más probable es querer guardar los datos de url en una variable de entorno.

useEffect
es un hook que recibe como parametro una funcion que se ejecutara cada vez que nuestro componente se renderice, ya se por un cambio de estado, por recibir props nuevas o porque es la primera vez que se monta
useState
podremos añadir un estado interno a nuestros componentes para hacerlos dinámicos e interactivos.
nos devuelve un array que tendrá el valor del estado y un método para actualizar el estado.

Yo implemente el useRffect de esta manera y tambien me funciono.

  useEffect(() => {
    const loadPokmons = async () => {
      try {
        const response = await getPokemonsApi();
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }
    return loadPokmons;
  }, [])

En este caso, creo que quedaria mejor con una promesa en mi opinion

export default function Pokedex() {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    getPokemonsApi()
      .then((res) => console.log("res", res))
      .catch((e) => console.log(e));
  }, []);

  return (
    <View>
      <Text>Pokedex</Text>
    </View>
  );
}

en el Pokedex.js yo realice la peticion directamente de la siguiente forma


const Pokedex = () => {
    useEffect(() => {
        (async () => {
            try {
                const url = `${API_HOST}/pokemon?limit=20&offset=0`;
                const response = await fetch(url);
                const result = await response.json();
                console.log('yes', result)
            } catch (error) {
                throw error;
                console.log('no', error)
            }
        })()
    }, []);

    return (
        <SafeAreaView>
            <Text>This is my Pokedex</Text>
        </SafeAreaView>
    );
}

export default Pokedex;

Yo use react-native-config para tener las variables de entorno en un .env, si les da error sigan los pasos del Manual Link (Android) / (iOS) pero no deberia darlo ya que react-native usa Autolinking y ahorra esa configuración y según estoy viendo los archivos de la dependecia tienen soporte para autolinking

De todos los cursos de Hooks de Platzi es el que mejor explica useState y useEffect

Yo en mi caso preferí usar axios en vez de fetch.