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>
);
}
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 en mi caso preferí usar axios en vez de fetch.
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 lugar de crear constants.js en utils con ese API_HOST no sería mejor crear variables de Entorno?, como se crean dichas variables para diferentes estados, ejemplo: dev, prod, beta ¿?
De todos los cursos de Hooks de Platzi es el que mejor explica useState y useEffect
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;
Lo malo de estos cursos es que se confunde "enseñar" algo con solo describir lo que se está haciendo.
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
Que puede estar sucediendo cuando no me imprime la respuesta en consola?
Beto Martinez
Luis Fernando Pedroza Taborda
Se ve mas simplificado y facil de entender, soy nuevo en esto.
Stiven Jiménez
Yo pensé lo mismo, me pareció un poco enredado.
Adrian Dalí
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.
Luis Fernando Pedroza Taborda
Gran aporte, gracias.
Luis Alejandro Nieto Ruth
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; }, [])
Gonzalo Caminos
Gracias. Me re sirvio.
Wilson Fabian Pérez Sucuzhañay
en lugar de crear constants.js en utils con ese API_HOST no sería mejor crear variables de Entorno?, como se crean dichas variables para diferentes estados, ejemplo: dev, prod, beta ¿?
Octavio Villavicencio Cruz
pero creo que "API_HOST" no es una constante de entorno, aunque en un desarrollo conjunto puedes tener API_HOST_SANBOX y API_HOST_PRODU creo que es mas facil tener esas constantes en un archivo ya que ese patron es muy parecido al que se usa con el desarrollo nativo de Java/C-Object
José Gregorio Estrada Meneses
De todos los cursos de Hooks de Platzi es el que mejor explica useState y useEffect
Luis Eduardo
alchile, no me gustaron mucho los cursos de react de platzi
Roberto Enrique Ajuchan Lopez
Luis Eduardo X2 lo veo demasiado basico la verdad
Eliezer Mas Y Rubi
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;
Jorge Ivan Meza
Lo malo de estos cursos es que se confunde "enseñar" algo con solo describir lo que se está haciendo.
walter ivan reynoso fernandez
Es verdad, no le entiendo nada de los codigos de Async, Await, useState, useEfecct... por qué NO EXPLICA BIEN, estoy adivinando y tengo que leer la documentación cada 2 minutos del video, si era así me salia mejor aprender solo con documentación y ahorraba dinero, lastima que me sirve mucho alguien que explique y una lastima que este profesor no cumpla bien su funcion
walter ivan reynoso fernandez
Es como si ya esperara que supiera todo y nomas me esta guiando a hacer un proyecto
Miguel Hernández
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
Luis Fernando Pedroza Taborda
Gracias por la aclaracion.
Juan Valentin Perdomo Bonilla
Que puede estar sucediendo cuando no me imprime la respuesta en consola?
jilma Jemimah Cavero de Arango
Tengo el mismo problema, lograste resolver ?
Ivan Camilo Hernandez
Pudiste resolver? Tengo el mismo problema
Kevin Parra Lopez
Luciana Durand
Cuando selecciono el incono de pokedex, en vez de mostrarme por consola los datos de los pokemones, me sale un error: "Network request failed", como puedo solucionar esto?
Josué Ramírez Hernández
Hola, seguramente te sale este error porque estas probando la app desde el emulador de Android estudio, este error sale porque el emulador no esta conectado a internet.
La solución es borrar el emulador que estas usando y crear uno nuevo con el sistema más nuevo, así tu emulador podrá estar conectado a internet y ya no te saldrá el error.
Saludos!
Jose David Nuñez Procchio
Por qué en el useEffect no ejecuto directo la función directo? No es un paso más estar poniendo adentro de una función autoejecutable?
Luis Enrique Rendon Cortez
Hola, les comparto el link del api
Alfonso Andres Zapata Guzman
Para agregar las variables en typescript, sigan estos dos enlaces:
// Guide to: https://stackoverflow.com/questions/75186535/how-to-get-env-variables-in-react-native-with-typescript-and-rn-cli // and https://levelup.gitconnected.com/using-environment-variables-in-a-react-native-app-f2dd005d2457
~ Que tal Platzinauta, ya conectamos en LinkedIn? ~
¡Que estas esperando! Conectemos en
GitHub,Medium,Redes socialeso unete al mejor servidor deDiscordsobre Python y ciencia de datos en español.
Daniel Briceño
Leibniz Moreno
tuve problemas al cargar la lista porque la url que carga el profe la carga v2 sin / y al momento de la URL poner
const url = ${API_HOST}pokemon?limit=20&offset=0; con un / antes del pokemon no cargaba, en resumen tener el / al cargar la url de la api luego de v2 o tenerla antes del pokemon en la const de url
Moises Abel Avila Garcia
exelente explicacion
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> ); }
Yo module bastante esta parte, me gusta tener todo archivo con una sola responsabilidad
Instalamos dotenv
yarn add -D react-native-dotenv
Creamos un archivo .env en la raiz del proyecto
REACT_APP_API_POKEMON=https://pokeapi.co/api/v2/pokemon
Creamos una carpeta Helpers y creamos un archivo llamado DeleteEmptyKeys que se va a encargar de limpiar las keys vacías de un objeto
/* eslint-disable no-param-reassign */ /** * Descripcion del helper: Este helper se encarga de eliminar los keys que estén vacíos dentro de un objeto, detecta los nulls o los false. * * Implementacion: Se importa y se pasa como parametro el objeto. * * Bugs: 0 */ // Esta función recibe un objeto y elimina las llaves vacías, // asignando el valor de la llave a los valores verdaderos. const DeleteEmptyKeys = (obj) => { return Object.keys(obj).forEach((key) => { // Recorre cada una de las llaves del objeto if (obj[key] === null || obj[key] === "") { // Si el valor es falso, nulo o vacío delete obj[key]; // Elimina la llave del objeto } if (obj[key] === true) { // Si el valor es verdadero // obj[key] = key; // Asigna el valor de la llave al valor del objeto } }); }; export default DeleteEmptyKeys;
Creamos un archivo constants para tener los types y evitar typos
import { REACT_APP_API_POKEMON } from "@env"; export const API_POKEMON = REACT_APP_API_POKEMON;
Creamos una carpeta llamada services y dentro un archivo llamado api.services.js
import { API_POKEMON } from "../constants/pokemon.types"; // Otros import DeleteEmptyKeys from "../helpers/DeleteEmptyKeys"; async function callApi(endpoint, options) { // Se agregan cabeceras al objeto de opciones pasado como parámetro. options.headers = { "Content-Type": "application/json", Accept: "application/json", ...options.headers, }; // Se guarda la URL de la API en una variable. const url = endpoint; // Se realiza la llamada a la API y se obtiene una respuesta. const response = await fetch(url, options); // Se convierte la respuesta a formato JSON. const data = await response.json(); if (!response.ok || data.error) { throw new Error(data); } // Se devuelven los datos obtenidos de la API externa. return data; } const api = { pokemons: { getAllPokemons(filters) { DeleteEmptyKeys(filters); const url = new URL(API_POKEMON); const params = new URLSearchParams(filters); url.search = params.toString(); return callApi(`${url}?${params.toString()}`, { method: "GET", redirect: "follow", }); }, }, }; export default api;
Y usamos eso para hacer la llamada dentro del componente
import { SafeAreaView, Text } from "react-native"; import React, { useEffect, useState } from "react"; // Componentes // Servicios import api from "../services/api.services"; const PokedexScreen = () => { // Estados const [data, setData] = useState({ loading: false, data: {}, error: null, }); const [filters, setFilters] = useState({ limit: 1, offset: 0, }); // Funciones const getData = async () => { setData({ loading: false, error: null }); try { const data = await api.pokemons.getAllPokemons(filters); console.log(data); setData({ loading: false, data }); } catch (error) { console.error(error); setData({ loading: false, error }); } }; // UseEffects useEffect(() => { if (!Object.keys(data.data).length) getData(); }, []); if (data.loading === true) { <SafeAreaView> <Text>Cargando...</Text> </SafeAreaView>; } return ( <SafeAreaView> <Text>item</Text> </SafeAreaView> ); }; export default PokedexScreen;
Implementado conTypeScript y Axios.
export interface PokemonResponse { count: number; next: string; previous: string; results: Result[]; } export interface Result { name: string; url: string; }
import axios, { AxiosResponse } from "axios"; import { PokemonResponse } from "../models/pokemon.ts"; import { API_HOST } from "../utils/constants.ts"; export async function getPokemonsApi( limit: string | number | null = 20, offset: string | number | null = 20 ) { try { const url = `${API_HOST}/pokemon?limit=${limit}&offset=${offset}`; const response: AxiosResponse<PokemonResponse> = await axios(url); return response.data; } catch (error) { throw error; } }
import { Text } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import React, { useEffect, useState } from "react"; import { getPokemonsApi } from "../api/pokemon"; import { Result } from "../models/pokemon"; export default function Pokedex() { const [pokemons, setPokemons] = useState<Result[]>([]); const start = async () => { try { const result = await getPokemonsApi(); setPokemons(result.results); console.log(result.results); } catch (error) { console.error(error); } }; useEffect(() => { start(); }, []); return ( <SafeAreaView> <Text>Pokedex</Text> </SafeAreaView> ); }