React Hooks [ useEffect ] Consumiendo una API
HTML-код
- Опубликовано: 4 фев 2025
- 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
![React Router [ #02 ] Rutas con Parámetros consumiendo una API](http://i.ytimg.com/vi/Q9YClZMj9-M/mqdefault.jpg)
![React Router [ #02 ] Rutas con Parámetros consumiendo una API](/img/tr.png)
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.
Ahora entendí todo, muchas gracias por enseñar tan bien ☺️
magistral muchas gracias estoy aprendiendo react y aunque no lo crean me ha costado un poco ya que es mucha nomenclatura nueva
sos el mejor explicando master
gracias por existir
el mejor video sobre este tema en todo youtube
Graciaaaasss!!! estoy aprendiendo React y me lancé de inmediato con los hooks!! Tus tutoriales me han servido demasiado
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
Para eso se crearon los hooks, es más amigable con los que recién empiezan
Amigo me salvaste el día. Un abrazo gigante.
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.
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
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
¡Gracias infinitas! ... claro, contundente y práctico. Gracias
Me has salvado el dia!! No sabes lo mucho que busqué entender esto y por fin pude gracias a tu video!
Gracias, justo estaba buscando esto el otro día y por fin lo encuentro. Me ha servido de mucho!
Al fin pude entender lo de useEffect!! . Justo lo que necesitaba , golazo de media cancha
Gracias Panita saludos desde Colombia
Muy buena explicación, me encanta el ánimo que pones cuando explicas, se agradece
Muchisimas gracias, funcionó, todo lo explicas de una forma tan clara!
Gracias por dedicar de tu tiempo para hacer estos vídeos, me estás ayudando a cambiar mi vida laboral
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.
Tan perdido estaba hasta que vi tu video 🥺🥺🥺🥺🥺
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!
Tu manera de enseñar es excelente, suscrito, tienes alguna comunidad?
Bro, me encanta como explicas , haces los temas complejos tan fácil de entender .
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ó :)
Amo tus tutoriales amigo, son los mejores!!! Eres grande amigo!
Eres un craaack! Explicas muy bien, incluso aprendí async await sin querer jajaja, gracias x el video:)
Buenaaaaaa... Aprendi React en un diaaaaaa
Muchas Gracias! Genial el video! super util!
LiKE PARA QUE EL HAGA UN LOGIN COMPLETO MERN STACK CON REACT HOOKS, PERFIL, REGISTER Y LOGIN
Excelente video, muchísimas gracias
Muchas , muchas Gracias!!
Venga Capo muy buena la explicación de ese useEffect
😍
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?
Aún me faltan vídeos por ver, muchas gracias. 😍👌🏻
Saludos José! nos vemos en el próximo video tutorial :)
Gracias, me encanto tu video pude entender mucho mejor el hook de effect
Muy claro y corto, buen vídeo me ayudo a comprender mejor el hook
TE AMO MIL GRACIAS
Gran video, muy bien explicado, saludos.
esto puede servir tambien para un post?
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 ?
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
jajajaja siempre novato :) jijiji Saludos!
¡Excelentes videos!
Tengo una duda como podría usar el useEffect para borrar la información que tenga en pantalla?
¡Saludos desde México!
Hola Ignacio, te hago una consulta! y si quisiera mostrar address? me dice q no puedo mostrar objetos. muchas gracias!
Mi respeto
Hola como podría hacer lo mismo pero cargando un Select en material ui
Gran explicación! Gracias crack
que bien enseñas amigo saludos!!
Este curso es una joya
hola me gsuto tu video pero amigo una pregunta como hago para consumir una api local
buenisima la explicacion!
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.
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!!!!
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.
Mae que bien explicas!!!
Genial video, una consulta, con Hooks como hago para tener cargados datos por defecto, antes de que se renderice el DOM por primera vez?
entonces useEffect, seria el equivalente al componentDidMount ?
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
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?
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!
guarda los diferentes arrays de company en diferentes states
Muy buen video!
No quiero traer todos los datos, solo los 2 primeros como se haría?
sos grande!
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. 🙄
Lo mismo me pasa
@@oscarandio2677 prueba con la funcion slice(0,10), reemplaza el segundo número por el número de registros que deseas traer.
Genial
a mi no me funcione con una api que hice aveces me carga y avece no
Cuando uso useeffect, por alguna extraña razón mi componente se renderea dos veces por que??? como puedo evitarlo???
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.
buenas, vendria muy bien , graficos y como obtener datos haciendo peticiones y graficar esos datos. muchas gracias amigo.
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.
Hola, los token los recibe el servidor, por lo tanto si está bien configurado no debería tener problemas :)
@@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.
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}
))
}
A mi me siguió dando errores :(
@@jorgesandoval5450 Paso tu git para ver tu codigo
Te amo
Genial!
alguna API gratuita de ciima que me puedas recomendar
Quisiera saber tanto como usted 😢😢😢
yo empecé hace poco con react solo es cosa de práctica :) mucho ánimo!!
@@bluuweb gracias 👍👍👍
La explicación es mucho mejor en velocidad 1.5x!
Muchas gracias, un gran video!!!!