Antes de continuar actualizando o editando los datos o eliminándolos, también asegurémonos, sin embargo,
de que no vemos los datos ficticios aquí inicialmente, sino que realmente vemos un
control de carga y tal vez también un mensaje si no hay datos para cargar o un mensaje de
error si tenemos un error y para eso, comencemos
con la rueda de carga. En la pantalla de descripción general de los
productos, quiero mostrar un control de carga mientras esperamos que lleguen los datos. Para eso, antes que nada, necesitamos saber
si estamos cargando o no y podemos controlar eso con el estado de uso,
así que con un estado interno en este componente.
Entonces, allí podemos agregar isLoading y establecer isLoading y luego simplemente usar el estado aquí de esta manera e inicialmente no estamos cargando, así
que configuré el estado inicial en falso y
ahora aquí cuando enviamos esto, así que aquí en efecto, configuré Está cargando a verdadero,
por supuesto, pero una vez que hayamos terminado, quiero volver a establecerlo en falso.
Ahora, lo bueno es despachar aquí, despacha nuestra acción de obtención de productos y, por lo tanto, esto nos da una promesa en realidad, así que
aquí puedo agregar
luego y también capturar más tarde para que el manejo de errores haga algo una vez que esto se hace.
También puede usar async wait, pero no está permitido usarlo de esta manera
aquí en efecto de uso, no es simplemente cómo se debe usar el efecto de uso.
Entonces, si desea utilizar el uso asíncrono aquí, tendría que incluir esto en una
función separada que debe crear en su efecto, como cargar productos, que es solo una función de envoltura ficticia
que se ve así, tal vez con set isLoading in ahí también.
Ahora aquí puede agregar asíncrono y ahora puede llamar a cargar productos como ese inmediatamente después, simplemente un contenedor que
se requiere debido a la forma en que funciona el
efecto de uso, no debe
devolver una promesa, lo haría si usa asíncrono aquí y por lo tanto, el uso de async no está
permitido, por otro lado, está permitido.
Así que ahora aquí,
podemos usar esperar aquí para esperar a que se realice este envío, lo que significa que esto esperará
automáticamente la promesa que está allí, por lo que para la solicitud HTTP y luego establecemos isLoading en falso
una vez que se hace esto.
Ahora, para mostrar una ruleta, afortunadamente React Native tiene uno para nosotros, el indicador de actividad que automáticamente
se verá bien para iOS y
Android, por lo que obtendrá automáticamente el estilo de plataforma
predeterminado y ahora podemos renderizarlo si estamos cargando. Entonces, allí en lugar de
devolver la lista plana, si isLoading es verdadero, devolveré una pieza diferente de jsx, devolveré una
nueva vista aquí con mi indicador de actividad allí. Para eso, por supuesto, también debes tener vista importada, así que asegúrate de que también esté disponible.
Ahora con eso devolvimos esta vista con el indicador de actividad, allí puede configurar el
tamaño para que sea grande y el color para que sea Colores. primario, por ejemplo, y esto, por supuesto, requiere que se importen los colores constantes,
así que asegúrese de que esté disponible y, por último, pero no menos importante, ahora quiero centrar este indicador, por lo que aquí podemos agregar
un estilo que, por supuesto, podríamos establecer con una hoja de estilo o aquí rápido y sucio,
flexione uno justifique el centro de contenido, alinee el centro de elementos. Sin embargo, en realidad usaré una hoja de estilo
aquí porque también la necesitaremos en un lugar diferente más adelante.
Así que aquí me referiré a los estilos, digamos centrado e importé la hoja de estilo de React Native
y con eso, luego baje, agregue mi objeto de estilos después de configurar las opciones
de navegación, tal vez, estilos con Stylesheet. crear, agregar la propiedad centrada allí que tiene este estilo con flex
justificar el contenido, alinear elementos y ahora con eso, deberíamos ver un indicador de actividad centrada mientras cargamos.
Entonces, si guardo esto y esto se vuelve a cargar, Firebase es muy rápido, por lo que no lo ves tanto tiempo, pero durante
un corto período de tiempo, ves ese spinner de carga aquí, con el aspecto diferente en iOS y Android, por supuesto.
Ahora, por supuesto, cargar es una cosa, a veces tampoco tienes datos que puedan cargarse. Digamos que en un
reductor, estamos llegando al producto. json, que es una fuente donde no se pueden obtener datos
y, por lo tanto, terminamos con una pantalla vacía.
Bueno, eso es algo que podemos hacer, pero no es la mejor
experiencia de usuario posible, por lo que quiero agregar otro si compruebo donde verifico si la carga es falsa, por lo que
si ya no estamos cargando y mis productos aquí, la longitud allí es igual a cero, lo que significa que no tenemos productos.
En ese caso, también devolveré mi contenido centrado aquí, pero allí simplemente quiero generar un texto
donde digo que no se encontraron productos, tal vez comience
a agregar algunos y, por supuesto, debe asegurarse de importar el componente de texto y usted también puede asignar sus estilos de fuente allí o crear un
componente de envoltura de texto predeterminado que usamos en módulos anteriores, por ahora solo tendré mi texto como este
y esto
es lo que vemos allí por ahora. Por supuesto, tan pronto como cambie
esto a la URL correcta donde realmente encontramos datos, funciona. Ahora, por último, pero no menos importante, también podría tener
un error. Digamos aquí, no
tengo. json allí,
por supuesto, es un error que normalmente evitaríamos porque es solo un error tipográfico de nuestra
parte, pero desafortunadamente los servidores Firebase son relativamente robustos. Entonces, para fingir que, por ejemplo, fallaron o algo salió mal,
simplemente
romperé la URL de esta manera, que es una URL no válida y ahora lo que vemos es un spinner infinito.
La razón de esto es que en realidad ahora no tenemos una respuesta válida. Entonces, si echamos un vistazo a nuestra acción aquí y la consola registra
los datos de esta respuesta aquí, vemos que a medida que se vuelve a cargar, la recuperación debe
ocurrir de inmediato, pero no
obtenemos ningún resultado
allí, no vemos que se registre
nada esto, solo recibimos una advertencia de rechazo de promesa en algún momento, por lo que parece que simplemente
estamos recibiendo un error y en este
momento, no estamos manejando un error.
Ahora, si usaría promesas sin esperar asíncrono, simplemente agregaría la declaración catch.
Aquí estamos usando async
wait, así que lo que hacemos es envolver esto en un bloque de prueba, todo ese código que finalmente queremos
ejecutar si todo tiene éxito y detectar algún error aquí, así que
un bloque de prueba de captura. Ahí es donde obtenemos un error potencial y
ahora con ese error obtenido aquí, podemos manejarlo, por ejemplo, enviarlo a
nuestro propio servidor analítico o hacer lo que queramos y luego tal vez también volver a arrojarlo, por supuesto, si
todo lo que haces es volviéndolo a lanzar, no habría necesitado agregar este bloque de captura de prueba,
pero por lo general, es posible que desee hacer más aquí: enviar a un servidor de análisis personalizado o
algo así como lo mencioné.
Entonces, ahora volvemos a lanzar el error, aún no es mejor,
todavía nos hace tener un error y, además de tratar de solucionarlo, también deberíamos agregar
otra verificación aquí antes de desempaquetar el
cuerpo de respuesta, también deberíamos verificar si la respuesta está bien, si eso es falso.
OK es un campo que tiene disponible en este objeto de respuesta y esto simplemente es cierto si la respuesta
está en el rango de 200 códigos de estado. Si está en un rango diferente, por ejemplo, porque no
está autenticado o algo así, entonces la API de búsqueda por defecto no arrojaría un error.
Sin embargo, quiero arrojar un error en ese caso para que siempre terminemos en el bloque catch si tenemos un
código de estado 400 o 500 o si tenemos un problema de solicitud de red, por ejemplo, si la solicitud ni siquiera puede
abandonar el dispositivo.
Así que aquí y eso es buscar API específica para manejar códigos de estado 400 y 500 que normalmente no
causarían un error,
también arrojaré un nuevo error aquí en ese caso donde digo que algo salió
mal, por supuesto que podría sumergirse en el el cuerpo de respuesta aquí en ese caso también y descubra qué está
mal allí, pero simplemente arrojaré este error genérico y ahora definitivamente tendremos un error si
algo sale mal si no recuperamos nuestros datos, pero aún así, simplemente vuelva a lanzar el error aquí.
Pero el lugar donde finalmente quiero manejarlo es mi componente aquí, mi componente
de pantalla porque allí, luego quiero mostrar un mensaje de error. Entonces, tenemos nuestro efecto y de la misma manera
que podríamos usar catch o el controlador de catch si lo usa y catch o async aguardan con try
catch en la
acción, también podemos hacerlo aquí.
Entonces, aquí, quiero intentar despachar esto, pero quiero detectar cualquier error potencial que podamos obtener.
Así que aquí capto cualquier
error que esto pueda producir y, dado que vuelvo a arrojar mi error allí, eso es lo que acabo de hacer aquí,
correcto, en última instancia, el error nos llegará aquí.
Entonces, finalmente terminaremos en este bloque de captura y
ahora para mostrar nuestros datos de error, podemos agregar otro estado: error y establecer error, puede nombrarlo como
desee.
Inicialmente eso no está definido porque inicialmente no tengo ningún error, pero luego aquí, llamaré a establecer error y estableceré
esto como error. mensaje por ejemplo, así que
al mensaje de este error que estoy recibiendo.
Aún así, por supuesto, quiero establecer la carga en falso a partir de entonces, eso no
cambia porque definitivamente
ya no estamos cargando incluso si tenemos un error, pero ahora también tenemos este estado de error que podemos usar, podemos usar
eso para verificar aquí. Si tenemos un
error, entonces si eso es cierto, ni siquiera necesito continuar, en cambio quiero devolver mi contenido centrado jsx aquí pero allá, solo
quiero generar un texto
donde digo que ocurrió un error, por ejemplo , Me gusta esto. Si ahora hacemos eso, verá que vemos una rueda
giratoria, pero luego
vemos
este texto de error. Ahora, por supuesto, esto no permite que
el usuario haga mucho, ahora podemos navegar y regresar, pero es posible
que queramos darle al usuario una forma de intentarlo nuevamente, quizás agregando un botón aquí. Así que ahora aquí con el botón importado, podemos
ir allí y luego agregar este componente de botón con un título de prueba nuevamente y, por supuesto, depende totalmente de usted cómo desea
permitir que el usuario maneje esto y allí puede agregar un
controlador onPress y ahora para poder cargar de nuevo, en realidad tomaré esta función
de productos de carga aquí, la sacaré del efecto
y la convertiré en una función regular de este componente para poder llamarlo desde el
efecto de uso interno.
Ahora, sin embargo, también debe ser una dependencia y, por lo tanto, para evitar un
bucle infinito, debe envolverse en la devolución de llamada de uso, así que importemos la devolución de llamada de uso aquí y envuelva esto alrededor de esta función aquí
donde la dependencia es
mi función
de envío, también puede agregar set
isLoading y establecer error, pero todas estas funciones nunca cambiarán, por lo tanto,
también puede omitirlas y, por lo tanto, esto nunca se volverá a crear, lo cual es
bueno, pero ahora podemos usar productos de
carga como una dependencia aquí en efecto y ahora ya que
no está dentro de la función de efecto de uso, podemos usar productos de carga en cualquier
otro lugar de este componente y la parte en
cualquier otro lugar está aquí este botón, si presionamos esto, también quiero activar los productos de carga nuevamente y, por
último, pero no menos importante, dar el botón color de colores. primario. Con eso, parece que tengo un error aquí con mis importaciones,
sí, ya tenía un botón importado, así que eliminemos la segunda importación, solo importela una vez y
ahora lo que obtendrá
es que esto realmente se volverá a cargar, eventualmente arroja un error y puede presionar intentar nuevamente para volver a cargarlo, sin
embargo, siempre vemos el mensaje de error simplemente porque nunca borramos el error y
si tenemos un error, siempre lo
devolvemos, ni siquiera llegamos a la carga hilandero.
Por lo tanto, debemos asegurarnos de que cada vez que cargamos nuestros productos aquí, volvemos a establecer el error
en nulo, por lo que restablecemos el error. Por cierto, React agrupará varias llamadas de estado establecido una al lado de
la otra, por lo que esto no conducirá a ciclos de renderizado
de componentes múltiples, está bien usarlo de esta manera.
Así que ahora con eso, si hago clic en intentar nuevamente, podemos intentarlo nuevamente. Obviamente, nunca tendrá éxito porque nuestra URL
está rota, pero aún así, así es como podríamos manejar este error. Con eso, sin embargo, volveré a mis acciones y
corregiré ese error corrigiendo esta URL nuevamente y ahora esto también
debería cargar nuestros datos correctamente y mostrarlos.