Podrías ocupar de base el hook del vídeo. La API de fetch te deja especificar que método HTTP tiene que utilizar, entonces puedes pasarlo como parámetro. Y luego pasarle un objeto para destructurarlo con la información que vayas a necesitar.
Lo hice con axios, pero parece que no funciona con snakbar, vi tu otro video para los snakbars, pero no puedo hacerlos funcionar juntos este metodo con snackbars
Consulta profe, algo que no entiendo es en que momento se vería lo del Loading... ya que la idea es que si los user tardan en cargar, estaría bien que aparezca un Loading... o un Cargando usuarios...
hola! gracias por el video! consulta, que extensiones usas para el autocompletado de codigo y el control de errores a medida que vas escribiendo codigo? gracias!
En vue el suspense no necesita tanto protocolo, con el promise en marcha ya tienes para mostrar en caso de error, de espera o si ya se resolvio la promesa, y no hay doble renderizado con o sin funciones de api, que chimbo que te encierres en react, vue es mejor, lastima que vue no tiene el mercado laboral por que no hay una empresa monopilio grande de fondo.
hola cuando hice lo del 6:36, me tiró el siguiente error: url is not defined. por lo visto ud tampoco definió URL pero si le funcionó, que pasa? (ya lo arreglé jaja, era un error mio)
Hola Carlos, un gusto, el video esta maravilloso, pero en mi ultima aplicación me aparece el siguiente error: "A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition." ¿Alguna idea de como lo arreglo? Gracias :D
Carlos, una duda, si tengo una API que me envía un flujo constante y muy alto de datos, el método .aborto() no me funciona, ¿Tiene algo que ver con que la app está renderizado y se relantice?
Aplicando el último método, el pro, ¿Cómo podría manejar los errores? Cuando fuerzo un error en la petición, el componente no se renderiza, queda la pantalla en blanco, me gustaría que se mostrara igualmente el título y colocar un mensaje de error o algo por el estilo. ¿Cómo se podría hacer? Gracias.
Gracias por el vídeo!!! Aunque creo que el último ejemplo aunque evitemos renderizados también dejamos al usuario un poco sin saber que está pasando en casos de cargas lentas.
Yo opino igual, aunque si es verdad que cuando hay un error en vez de enviar un throw, mejor enviar un error y así cuando se hace llamada me duele un data con un error o un response, podría controlar un error.
debido a que el componente de que encapsula el fetch se renderiza al cambiar la url, como hago un "reload", intente creando una funcion dentro del hook...y no me funciono, alguna idea?...gracias!
Me has explicado todo lo que no en la escuela. Tengo una pregunta, cual seria la ventaja de Axios? porque se entrada, Fetch no parece generar mas código que Axios...
Me sale este error cuando le doy click al boton de cancelar request: ncaught Error: Objects are not valid as a React child (found: [object DOMException]). If you meant to render a collection of children, use an array instead. he above error occurred in the component: at li at ul at div at App
Gran material! Hubiese sido más interesante el ejemplo usando Typescript, para ver por ejemplo si se puede tipar el fetch o algo así. Saludos desde Santiago de Chile
Excelente aporte, solo me quedan dos dudas: La primera es como se podria controlar cuando el endpoint no da respuesta después de cierta cantida de segundos ? y la segunda es depronto porque así lo he trabajo en una plataforma de Ecommerce: porque se hace uso de Node JS para consumir los endpoint desde react ?
Excelente video, he aprendido mucho 👍🏻. Solo tengo una consulta, en el segundo 14:02, no sería mejor usar un useRef en lugar de useState, para almacenar el AbortController? Ya que la función del useState no se está utilizando y solo se necesita acceder a la función abort de la instancia del AbortController. Solo pregunto, todos estamos aprendiendo 👍🏻
Hola genio, no soy experto pero creo que useRef se usa para otros enfoques, useRef obtiene una referencia única de un elemento del DOM, en cambio useState es para almacenar un estado. En este caso en vez de usar una variable let que va sobreescribiendo AbortController lo hace dentro de un useState, que es la magia de React. En la documentación dice que es preferible usar useState y evitar el useRef ya que es manejar el DOM de manera imperativa. El useRef usalo en casos que no quede otra, por ejemplo no lo uses para un input del form. Saludos , espero que sume el comentario
Cuando hago la aplicación en mi computadora y uso a sincronismo funciona todo. Pero cuando lo subo en el netlify no se consume la API...no trae los datos... Qué magia le tengo que poner para que ande?
Como dato... Para que les salga el Loading no deben ubicar el read en el mismo componente donde están ubicando el suspense, el que debe tener el read es un hijo del suspense, de esa forma sí podrán ver el Loading mientras la solicitud se procesa.
No entendí, por favor, ¿Podrías explicármelo? Y otra cosita, ¿Por qué cuando hay un error en la petición no se renderiza nada del componente? Muchas gracias.
Hola, si funciona, se mira bien cajeta el renderizado, solo que me gustaria que la pagina no se fuera hacia arriba siempre, digamos que estoy renderizando unas cards, entonces me gusta el efecto de que todo se renderice de golpe... Pero que tal que el cliente esta navegando, hace click en una de las cards y luego en su celular o cualquier dispositivo le da al boton "atras", el deber ser pienso yo que es que cuando regrese a navegar la pagina continue en la posicion que estaba antes de meterse al detalle de esa card... Tendrás una idea de como se soluciona eso ?? Ya le he buscado mucho... antes de aplicar tu tecnica estuve colocando arrays estaticos con useEffect pero es el usseEfect en si el que hace que se hagan scrolls "locos" cuando viene data dinamica... Gracias amigo
yo estoy teniendo un problema, cuando implemento el "AbortController" me deja de funcionar el "Loading", yo veo que se muestra como medio segundo y desaparece. Me di cuenta que cuando se renderiza el componente y se hace el fetch, el "AbortController" queda en "aborted" y siempre capturo en el catch un "AbortError" no se porque.
Hola Buenas Tardes. Estaba viendo tu video y me gustaria saber por qué en la versión que usas la función fetchData la ejecutas fuera del componente App y no dentro justo antes del read?
buena aportación pero mi duda es... entonces para que pones el Loading si no lo va a ocupar... un dislike por querer engañarnos jajaj aparte haciendo pruebas, no hay control de errores, haces guardado en visual te salen un buen de errores, no hay cancelación de petición, muy mal el video, ibas bien y la arruinaste queriendo dar atole con el dedo dirían en mi pueblo jajaja
Bro estuve viendo que Reactjs está muriendo y que ahora es mejor el rendering en el server y demás... Que tan cierto es esto? Quiero aprender Reactjs que debo hacer?
Explicas super bien , esta super bueno el video, la verdad es que aprendí un monton de cosas nuevas a la hora de hacer peticiones fetch , gracias , espero puedas subir mas contenido asi !
Ahora bien, muy buen video y todo, pero que pasa cuando tengo que consultar al api por parámetros que me da el usuario? Eso funciona bien si es solo mostrar datos, pero normalmente siempre se reciben datos del usuario para poder buscar en api, los datos deseados, utilizando eso, como le pasaría parámetros de un formulario?
Carlos, soy beginner y quiero construir un dashbard para consumir APIs de mis servicios Cloud SaaS que tebgo con clientes de Cisco, Extreme, Aruba.. que me recomiendas para empezar y probar?? Gracias por tus recomendaciones.
Es justo lo que también estoy observando. Si el fetch falla, va a decir "Loading" y se va a quedar ahí siempre, además si el Loading no se muestra mientras carga, para que implementarlo ahí con esa metodología (Render-ad-you-fetch)? Me gustaría ver una forma de utilizar la metodología "Render-ad-you-fetch" con un Loading que funcione como al principio
Excelente clase, pero tengo ciertas dudas a la hora de manejar el url. Estoy manejando una poke api y mediante mi input no me aparece el pokemon que establezco en este caso!
Lo que me costó a mí entender el array vacío del useeffect y era algo tan simple como "se renderiza una vez cuando se monte el componente" eres dios Carlos ♥️
Si lo analizas bien useEffect no es más que una función que recibe dos parámetros un callback y un array de dependencia, si está vacío el array solo llama al callback una vez de lo contrario llamará cada que las dependencias cambien
Mientras menos paquetes uses en tu app mejor, ya que mientras mas paquetes mas actualizaciones, vulnerabilidades, lo que se traduce en mas trabajo de mantenimiento para vos. Mientras el paquete que estás utilizando no sea indispensable es mejor usar funciones nativas en este caso de node.
