React Hooks [ useEffect ] Consumiendo una API

Подписаться 226 тыс.

Просмотров 59 тыс.

50% 1

Curso completo ⭐ REACT + FIREBASE ⭐ Aquí: curso-react-js-...
El Hook de efecto o useEffect en ReackJS nos permite llevar acciones una vez que nuestro componente esté montado o renderizado, además puede estar al pendiente de algún estado donde se ejecutará nuevamente si este cambia. En este ejemplo veremos como consumir una API.
Documentación utilizada:
💩 bluuweb.github...
💩 es.reactjs.org...
💩 React curso [Lista de reproducción]: bit.ly/37VBU1i
🐱‍👤 Todos los cursos aquí: / bluuweb
#reactjs #javascript #useEffect
¿Quiéres apoyar el canal?
🧨Curso Bootstrap 4 [UDEMY] curso-bootstrap...
🧨Curso Vue.js + Firebase [UDEMY] curso-vue-js-ud...
🧨Cursos en oferta Udemy: ofertas.bluuweb... --
Mi Setup:
⭐️ Teclado Mecánico: amzn.to/3Ns6fdK
⭐️ Audífonos: amzn.to/3pwrzqt
⭐️ Micrófono: amzn.to/3JH4tV7
⭐️ Monitor: amzn.to/3NTt8Iu
⭐️ Procesador: amzn.to/3raD4EC
⭐️ Tarjeta de Video: amzn.to/437t78b

Опубликовано:

1 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 94

@NovatoWTF 4 года назад

LiKE PARA QUE EL HAGA UN LOGIN COMPLETO MERN STACK CON REACT HOOKS, PERFIL, REGISTER Y LOGIN

@andresvillanueva9362 4 года назад

Muchas gracias por el vídeo. En la parte del error con null, ocurre porque hay un tiempo de espera mientras se consume la API, por lo que se genera un error ya que inicialmente 'no existen datos'. Yo la solucione usando la condición que vimos las pasadas clases de que si existen datos, me pinte el .map que creamos, pero si no existen, pinte un mensaje tipo 'No hay datos'. Asi le da uno tiempo al programa para que reaccione y se soluciona ese problema.

@ratsimat 4 года назад

Graciaaaasss!!! estoy aprendiendo React y me lancé de inmediato con los hooks!! Tus tutoriales me han servido demasiado

@bluuweb 4 года назад

Esa es la idea, comenzar con lo más nuevo jijiji de igual forma trataré de subir videos con la forma tradicional y clases. Saludos

@luiggymacias5735 3 года назад

Para eso se crearon los hooks, es más amigable con los que recién empiezan

@emmiraffo 2 года назад

Mi respeto

@juliopaez9989 2 года назад

¡Gracias infinitas! ... claro, contundente y práctico. Gracias

@alanmejia2123 Год назад

¡Excelentes videos! Tengo una duda como podría usar el useEffect para borrar la información que tenga en pantalla? ¡Saludos desde México!

@jorgeloaiza3406 Год назад

Lo hago tal como el video y al hacer console.log de "equipo" sale muchas veces Undefined y luego aparece muchas veces el contenido de "equipo" que sería lo que devuelve la API. ¿Qué será? Gracias.

@juliopaez9989 2 года назад

Les dejo como inicializar con props el valor de los campos, estoy renderizando una tabla los registros, digamos un falso excel y desde ahi con un link recuperar el registro para editar, el initialValue no me tomaba bien el valor de los props, al abrir por primera vez, iniciaba los campos en blanco, al abrir otro registro, tomaba en el formularios el dato de anterior registro. Intente cientos de soluciones, con useEffet, etc, etc, y la solución es poner esta linea justo despues de la etiqueta

@carolinaloaiza2924 3 года назад

Creo que enseñar es lo tuyo, explicas muy bien, tengo una pregunta si quisiera limitar el numero de registros por mostrar, como lo harias?, me estoy conectando a una api que tiene 2000 registros pero solo quiero traer 10. 🙄

@oscarandio2677 2 года назад

Lo mismo me pasa

@carolinaloaiza2924 2 года назад

@@oscarandio2677 prueba con la funcion slice(0,10), reemplaza el segundo número por el número de registros que deseas traer.

@valeriadonoso4738 10 месяцев назад

Ahora entendí todo, muchas gracias por enseñar tan bien ☺️

@marcelnunez1658 3 года назад

Tu manera de enseñar es excelente, suscrito, tienes alguna comunidad?

@davidgallego1216 2 года назад

Amigo me salvaste el día. Un abrazo gigante.

@matitk 2 года назад

Buenas, consulta: Al poner un map como en el video me devuelve solo un item (son 10 elementos), también me pone un error de que tengo que poner return en el map. De las dos formas igualmente me devuelve un solo item. Por que puede ser?

@germanpinto883 Год назад

tengo claro q el useEffect se usa para consumir APIs y para efectos secundarios, Q serian los efectos secundarios a parte de consumir APIs? o sea en q otros casos se debe usar el useEffect?

@VocesDelAyer777 2 года назад

tengo un proyecto y quería consumir una api sin parámetros que he creado en c#, pero al momento de ejecutar no me muestra los datos.

@Aleverassj 2 года назад

Hola como podría hacer lo mismo pero cargando un Select en material ui

@xisoka1222 4 года назад

Al fin pude entender lo de useEffect!! . Justo lo que necesitaba , golazo de media cancha

@urielcajiga3829 2 года назад

Muchas gracias, un gran video!!!!

@meltrix1626 2 года назад

el mejor video sobre este tema en todo youtube

@lautaroventura9573 2 года назад

No quiero traer todos los datos, solo los 2 primeros como se haría?

@DR-op2pe 2 года назад

esto puede servir tambien para un post?

@578michael 2 года назад

a mi no me funcione con una api que hice aveces me carga y avece no

@ayrtonart 3 года назад

Vengo del react viejo con clases y aun me cuesta los hooks que no sean useState , estos videos prácticos me ayudan mucho a entenderlos.

@Mauriciorosalesnolasco 3 года назад

Tan perdido estaba hasta que vi tu video 🥺🥺🥺🥺🥺

@paolamagaliortiztriguis8546 2 года назад

Me has salvado el dia!! No sabes lo mucho que busqué entender esto y por fin pude gracias a tu video!

@code_castle 4 года назад

Que agradable sujeto jijiji... Se nota que eres muy humilde Ignacio, esos errores siempre nos salen a los novatos y los colocaste apropósito para ayudarnos a arreglarlos jajaja

@bluuweb 4 года назад

jajajaja siempre novato :) jijiji Saludos!

@leticiafunes1306 2 года назад

Muchas , muchas Gracias!!

@JuanSebastian28 4 года назад

Muy buena explicación, me encanta el ánimo que pones cuando explicas, se agradece

@elnaranjita248 3 года назад

Gracias Panita saludos desde Colombia

@Satoistheonlyone 2 года назад

TE AMO MIL GRACIAS

@diegoab4693 4 года назад

Venga Capo muy buena la explicación de ese useEffect

@bluuweb 4 года назад

😍

@mr_pocoyo7432 3 года назад

Te amo

@ekana17 3 года назад

Genial

@federicosabatini1240 3 года назад

Hola #Bluuweb muchas gracias por la excelente explicacion ! tengo el problema que si consumo de la API con una función async-await que se active desde un evento onClick (button) no dentro del useEffect no me actualiza el setState ? eso a que se debe y como podría solucionarlo ?

@ZeR0ByTe 4 года назад

Una duda que me surge, este es el ultimo video y luego empiezas con Redux. Son temas distintos?? hasta aca llega la parte de "React" puro??? Me confunde el hecho de cambiar a Redux ahora. Nuevamente mi gracias y estoy aprendiendo muchisimo!!!!

@ssantandersnw 2 года назад

Muy buena explicación, compré un curso tuyo de react en Udemy y sin duda de los mejores, consulta. Cómo puedo mostrar los datos de esa misma api que consumes pero como un árbol (desplegar los hijos), vi que el JSON tenía child, saludos master

@harryconcoblanejo6055 4 года назад

Hola Ignacio, te hago una consulta! y si quisiera mostrar address? me dice q no puedo mostrar objetos. muchas gracias!

@oscarandio2677 2 года назад

Gracias, justo estaba buscando esto el otro día y por fin lo encuentro. Me ha servido de mucho!

@josealexanderriostrespalacios 2 года назад

Muchisimas gracias, funcionó, todo lo explicas de una forma tan clara!

@hectoradanmoraleslugo5693 3 года назад

La explicación es mucho mejor en velocidad 1.5x!

@juancarloscarmona5636 3 года назад

entonces useEffect, seria el equivalente al componentDidMount ?

@ifanfatcat 3 года назад

Eres un craaack! Explicas muy bien, incluso aprendí async await sin querer jajaja, gracias x el video:)

@jaimetuyuc7117 4 года назад

Hola, tengo una duda al practicar useEffect. cuando hago una consulta a una API veo que se ejecuta multiples veces, alguien que me pueda apoyar en ver que pasa con eso.

@javiermendoza1357 Год назад

magistral muchas gracias estoy aprendiendo react y aunque no lo crean me ha costado un poco ya que es mucha nomenclatura nueva

@oscargm1979 3 года назад

Yo solucioné el null o bien diciendo que puede ser null o Array,opcion mas cutre: React.useState(null || []) o bien que si existe equipo lo pinte, me quedo con esta: { equipo && equipo.map((person,i) => ( {person.name} {person.username} )) }

@jorgesandoval5450 3 года назад

A mi me siguió dando errores :(

@jelsynceron5163 3 года назад

@@jorgesandoval5450 Paso tu git para ver tu codigo

@h1800 4 года назад

Cuando uso useeffect, por alguna extraña razón mi componente se renderea dos veces por que??? como puedo evitarlo???

@danielvillarreal3098 4 года назад

buenas, vendria muy bien , graficos y como obtener datos haciendo peticiones y graficar esos datos. muchas gracias amigo.

@gustavo.velasquez 4 года назад

Genial video, una consulta, con Hooks como hago para tener cargados datos por defecto, antes de que se renderice el DOM por primera vez?

@JuanDavid-gp4iq 4 года назад

Hola Bluuweb, una pregunta, con fetch puedo enviar datos post a una pagina cualquiera y antes de enviarlos estar conectado a una ip ? Gracias.

@manuelrosen2752 3 года назад

Rayos!!!, al fin pude tener una mejor compresión sobre useEffect, he comprado cursos y he visto bastantes videos sobre este tema, y a la verdad que con este video lo pude entender. Gracias Bluuweb.

@nov0caina 3 года назад

Excelente video, muchísimas gracias

@luispizarro6010 3 года назад

Recién estoy comenzando con react js y me gusta siempre meterme de lleno primero hacer un sistema y de acuerdo a la necesidad voy investigando es la primera vez que me sentí demasiado frustrado al no poder resolver esto y que siempre se quede en promisse mi lista. Gracias hermano nuevo seguidor me salvaste de un derrame cerebral

@MrDev1024 2 года назад

Muy claro y corto, buen vídeo me ayudo a comprender mejor el hook

@juansebastiangaitanzapata2255 3 года назад

hola me gsuto tu video pero amigo una pregunta como hago para consumir una api local

@alanbravo770 3 года назад

Gran video, muy bien explicado, saludos.

@afxcrush41 3 года назад

Eres el mejor! Gracias! Me compré un curso de MERN y estaba estancado en esta parte, pero gracias a tu explicación sencilla me salió :)

@marceloveron2393 2 года назад

sos el mejor explicando master gracias por existir

@erikaalejandraarangovelez7054 3 года назад

Muchas Gracias! Genial el video! super util!

@CarlosMRodriguez333 4 года назад

alguna API gratuita de ciima que me puedas recomendar

@MOmundo 3 года назад

Gracias, muy genial como te topas con los problemitas que nos topamos todos los que aprendemos comúnmente, de esa forma vemos como los resuelves. Genial!

@estebansierra4118 3 года назад

Gracias por dedicar de tu tiempo para hacer estos vídeos, me estás ayudando a cambiar mi vida laboral

@d-landjs 3 года назад

Amo tus tutoriales amigo, son los mejores!!! Eres grande amigo!

@alejandrogonzalezvidela4483 2 года назад

Muy buen video! Super claro! A mí me quedó una duda: Si por ejemplo quiero recorrer el atributo "company" que se divide en varias partes. Cómo lo haría? Pensé en hacer un map dentro del map, pero no me funcionó. Muchas gracias!

@AldaDelAlba Год назад

guarda los diferentes arrays de company en diferentes states

@marekipasita817 4 года назад

Gracias, me encanto tu video pude entender mucho mejor el hook de effect

@MsElsospechoso28 4 года назад

Bro, me encanta como explicas , haces los temas complejos tan fácil de entender .

@sebastianandressanchezherr3467 3 года назад

Buenaaaaaa... Aprendi React en un diaaaaaa

@sobecgarcia9330 4 года назад

que bien enseñas amigo saludos!!

@germanmora9348 4 года назад

Gran explicación! Gracias crack

@kela2812 4 года назад

buenisima la explicacion!

@gerardoquinonez175 4 года назад

Mae que bien explicas!!!

@thecovarrubias 4 года назад

Aún me faltan vídeos por ver, muchas gracias. 😍👌🏻

@bluuweb 4 года назад

Saludos José! nos vemos en el próximo video tutorial :)

@luiscode92 3 года назад

sos grande!

@martincarp4671 4 года назад

Muy buen video!

@noeblackberry5209 4 года назад

Que excelente esto, gracias Ignacio, consulta siempre me he preguntado, cuando se consume un API privado, como se hace para esconder el token pues al ser javascript al final puede estar expuesto, gracias saludos.

@bluuweb 4 года назад

Hola, los token los recibe el servidor, por lo tanto si está bien configurado no debería tener problemas :)

@noeblackberry5209 4 года назад

@@bluuweb gracias, pero cuando uso un API privado debo enviar el token sea jwt por cabeceras, y si hago eso por cualquier framework, puede quedar expuesto el token, y esolo copiarlo y hacer una petición desde otro lugar, eso es lo que creo, no se si funciona así, pues si uso fetch puedo hacer peticiones api y poner el token en cabecera pero igual si inspeciono el código puedo obtener ese token facilmente, muchas gracias por tus videos los sigo fielmente, saludos.