Se ve mas simplificado y facil de entender, soy nuevo en esto.
Yo pensé lo mismo, me pareció un poco enredado.
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.
Gran aporte, gracias.
Yo en mi caso preferí usar axios en vez de fetch.
Yo implemente el useRffect de esta manera y tambien me funciono.
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 ¿?
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
De todos los cursos de Hooks de Platzi es el que mejor explica useState y useEffect
alchile, no me gustaron mucho los cursos de react de platzi
Luis Eduardo X2 lo veo demasiado basico la verdad
en el Pokedex.js yo realice la peticion directamente de la siguiente forma
constPokedex=()=>{useEffect(()=>{(async()=>{try{const url =`${API_HOST}/pokemon?limit=20&offset=0`;const response =awaitfetch(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>);}exportdefaultPokedex;
Lo malo de estos cursos es que se confunde "enseñar" algo con solo describir lo que se está haciendo.
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
Es como si ya esperara que supiera todo y nomas me esta guiando a hacer un proyecto
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
Gracias por la aclaracion.
Que puede estar sucediendo cuando no me imprime la respuesta en consola?
Tengo el mismo problema, lograste resolver ?
Pudiste resolver? Tengo el mismo problema
Yo module bastante esta parte, me gusta tener todo archivo con una sola responsabilidad
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.constDeleteEmptyKeys=(obj)=>{returnObject.keys(obj).forEach((key)=>{// Recorre cada una de las llaves del objetoif(obj[key]===null|| obj[key]===""){// Si el valor es falso, nulo o vacíodelete 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}});};exportdefaultDeleteEmptyKeys;
Creamos un archivo constants para tener los types y evitar typos
Creamos una carpeta llamada services y dentro un archivo llamado api.services.js
import{API_POKEMON}from"../constants/pokemon.types";// OtrosimportDeleteEmptyKeysfrom"../helpers/DeleteEmptyKeys";asyncfunctioncallApi(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 =awaitfetch(url, options);// Se convierte la respuesta a formato JSON.const data =await response.json();if(!response.ok|| data.error){thrownewError(data);}// Se devuelven los datos obtenidos de la API externa.return data;}const api ={pokemons:{getAllPokemons(filters){DeleteEmptyKeys(filters);const url =newURL(API_POKEMON);const params =newURLSearchParams(filters); url.search= params.toString();returncallApi(`${url}?${params.toString()}`,{method:"GET",redirect:"follow",});},},};exportdefault api;
Y usamos eso para hacer la llamada dentro del componente
import{SafeAreaView,Text}from"react-native";importReact,{ useEffect, useState }from"react";// Componentes// Serviciosimportapifrom"../services/api.services";constPokedexScreen=()=>{// Estadosconst[data, setData]=useState({loading:false,data:{},error:null,});const[filters, setFilters]=useState({limit:1,offset:0,});// FuncionesconstgetData=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 });}};// UseEffectsuseEffect(()=>{if(!Object.keys(data.data).length)getData();},[]);if(data.loading===true){<SafeAreaView><Text>Cargando...</Text></SafeAreaView>;}return(<SafeAreaView><Text>item</Text></SafeAreaView>);};exportdefaultPokedexScreen;
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?
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!
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?
Hola, les comparto el link del api
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 LinkedIn, GitHub, Medium, Redes sociales o unete al mejor servidor de Discord sobre Python y ciencia de datos en español.
importaxios,{AxiosResponse}from"axios";import{PokemonResponse}from"../models/pokemon.ts";import{API_HOST}from"../utils/constants.ts";exportasyncfunctiongetPokemonsApi(limit: string | number |null=20,offset: string | number |null=20){try{const url =`${API_HOST}/pokemon?limit=${limit}&offset=${offset}`;constresponse:AxiosResponse<PokemonResponse>=awaitaxios(url);return response.data;}catch(error){throw error;}}
import{Text}from"react-native";import{SafeAreaView}from"react-native-safe-area-context";importReact,{ useEffect, useState }from"react";import{ getPokemonsApi }from"../api/pokemon";import{Result}from"../models/pokemon";exportdefaultfunctionPokedex(){const[pokemons, setPokemons]= useState<Result[]>([]);conststart=async()=>{try{const result =awaitgetPokemonsApi();setPokemons(result.results);console.log(result.results);}catch(error){console.error(error);}};useEffect(()=>{start();},[]);return(<SafeAreaView><Text>Pokedex</Text></SafeAreaView>);}
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
