1 00:00:02,390 --> 00:00:07,550 Ahora, con esta acción siendo enviada, podemos ir al reductor y escribir un código aquí en el cambio de entrada y ese 2 00:00:08,170 --> 00:00:09,440 es un código muy simple. 3 00:00:09,440 --> 00:00:18,650 Devolvemos un nuevo estado donde copio mi estado anterior y quiero actualizar el valor con acción. valor porque el valor es una propiedad que tengo en esta 4 00:00:19,400 --> 00:00:25,650 acción, la otra es isValid y esa es la otra cosa que también quiero actualizar 5 00:00:25,650 --> 00:00:30,710 en cada pulsación de tecla, isValid para esta entrada, no para todo 6 00:00:30,710 --> 00:00:38,420 el formulario sino para esta entrada administrada internamente. No actualizaré tocado aquí, en su lugar, tocado debería actualizarse cuando realmente 7 00:00:38,930 --> 00:00:43,490 perdemos el foco porque eso significa que el usuario ha terminado de ingresar contenido por el 8 00:00:43,490 --> 00:00:52,550 momento, por lo que ahora quiero marcar esto como tocado y posiblemente mostrar errores de validación. Entonces, aquí, el controlador de foco perdido es una 9 00:00:52,580 --> 00:00:56,690 función que agrego y allí, enviaré una 10 00:00:59,970 --> 00:01:01,890 acción. Ahora para 11 00:01:01,890 --> 00:01:04,470 eso, crearé un identificador de acción 12 00:01:04,710 --> 00:01:16,170 aquí, entrada borrosa, como esta, entrada borrosa como esta y ahora podemos enviar entrada borrosa aquí, no es necesario adjuntar ningún dato y ahora en nuestro reductor, podemos usar que 13 00:01:16,170 --> 00:01:24,060 con otro caso, entrada borrosa y si ese es el caso, devuelvo un nuevo estado donde copio el estado anterior 14 00:01:24,060 --> 00:01:29,280 porque quiero mantener el valor y es válido y no cambiar eso, pero 15 00:01:29,280 --> 00:01:36,620 quiero establecer tocado en verdadero, así que tan pronto a medida que difuminamos una entrada, se trata como tocada. 16 00:01:36,750 --> 00:01:44,110 Ahora solo necesitamos conectar esta función, así que configuraré el oyente onBlur aquí y apuntaré al controlador de foco perdido para que 17 00:01:44,110 --> 00:01:46,870 se active cuando esta entrada se vuelva borrosa. 18 00:01:49,850 --> 00:01:57,100 Ahora, todo está bien y esto administrará el estado dentro de esta entrada, por supuesto, todavía necesito 19 00:01:57,190 --> 00:02:03,370 reenviar el valor y la información, ya sea que esa entrada sea válida o no, 20 00:02:03,370 --> 00:02:14,700 a mi padre, así que a la pantalla de edición del producto. Por lo tanto, lo que podemos hacer es agregar el efecto de uso aquí como 21 00:02:14,700 --> 00:02:15,310 una 22 00:02:18,430 --> 00:02:28,070 importación en el componente de entrada y tal vez agregarlo aquí y en la función de efecto de uso, quiero llamar a una función que espero obtener 23 00:02:28,130 --> 00:02:40,980 a través de accesorios, tal vez en el cambio de entrada, el nombre depende de usted y simplemente ejecutaré esto y reenviaré mi valor de estado de entrada y mi estado de entrada es información 24 00:02:40,980 --> 00:02:48,540 válida, de modo que en el componente principal, podemos agregar aquí una función que escuche eso al final, que se activa, 25 00:02:48,540 --> 00:02:53,790 que recibe estos dos argumentos y luego en el padre, por lo que en 26 00:02:53,790 --> 00:03:00,310 el componente de pantalla, podemos actualizar nuestro estado allí. Ahora lo importante es ¿cuándo debería ejecutarse este efecto de 27 00:03:00,310 --> 00:03:07,420 uso y no debería ejecutarse después de cada pulsación de tecla? En cambio, esto debería ejecutarse cada vez que 28 00:03:07,420 --> 00:03:17,780 nuestro valor de estado de entrada o cambios válidos, por supuesto, porque eso es de lo que dependemos o para ser precisos, incluso podríamos enviar esta 29 00:03:17,780 --> 00:03:25,910 información solo si el estado de entrada tocado es verdadero porque de lo contrario el componente padre podría no importar. 30 00:03:26,100 --> 00:03:31,680 Entonces, nuestra dependencia aquí es el estado de entrada completo porque usamos todos los valores, pero solo activaremos esta 31 00:03:31,680 --> 00:03:36,600 función en el componente principal si se toca, por lo que este efecto se ejecutará con 32 00:03:36,600 --> 00:03:42,240 más frecuencia, pero la mayoría de las veces no hará nada mientras tocado no sea cierto y los accesorios, por 33 00:03:42,480 --> 00:03:49,170 supuesto, también sean nuestra dependencia, ahora para evitar un bucle de representación infinito aquí, podemos usar la sintaxis de desestructuración de objetos y 34 00:03:49,650 --> 00:03:56,640 extraer el cambio de entrada, de modo que si otros accesorios cambian, no Refire este efecto porque en el cambio de entrada es lo 35 00:03:56,640 --> 00:04:01,890 que necesitamos allí y ahora podemos agregar que esto es una dependencia y las otras cosas, otros cambios 36 00:04:01,890 --> 00:04:03,820 en los accesorios no desencadenarán esto. 37 00:04:04,260 --> 00:04:10,620 Así que ahora llamamos a esto en el componente primario cada vez que se toca y luego reenviamos el valor y 38 00:04:10,650 --> 00:04:13,470 la validez de esta entrada al componente primario. 39 00:04:16,680 --> 00:04:23,400 Así que ahora usemos eso en la pantalla de edición del producto, allí en nuestras entradas como en la entrada del título, podemos 40 00:04:23,400 --> 00:04:29,670 agregar el accesorio de cambio de entrada y ese es el accesorio al que apunto aquí, así que necesitas acertar ese 41 00:04:29,670 --> 00:04:34,230 nombre y esto espera obtener una función como un valor que, a su vez, recibirá dos 42 00:04:34,230 --> 00:04:38,140 argumentos cuando se llame: el valor y la validez de esa entrada. 43 00:04:38,220 --> 00:04:44,490 Entonces, aquí quiero señalar una función y ese puede ser nuestro controlador de cambio de entrada, digamos, podemos reciclar esto, solo le 44 00:04:44,490 --> 00:04:46,910 cambio el nombre para que sea más adecuado. 45 00:04:47,130 --> 00:04:55,070 Entonces, el controlador de cambio de entrada se puede activar aquí, de esta manera, allí todavía quiero pasar mi identificador porque quiero 46 00:04:55,100 --> 00:04:59,930 reutilizar eso para todas mis entradas y ahora, ya que estoy en el componente 47 00:04:59,930 --> 00:05:07,940 de pantalla, tendremos múltiples entradas y allí , por lo tanto, obtenemos nuestro identificador y luego obtenemos el valor y la información 48 00:05:07,940 --> 00:05:09,410 es válida, ¿verdad? 49 00:05:09,410 --> 00:05:15,740 Entonces, valor de entrada y validez de entrada, eso es lo que obtenemos, correcto, porque eso 50 00:05:15,740 --> 00:05:19,940 es lo que reenviamos desde el componente de entrada aquí, eso 51 00:05:19,940 --> 00:05:22,510 es lo que pasamos a esto 52 00:05:22,580 --> 00:05:31,110 en la función de cambio de entrada. Por lo tanto, aquí, no necesitamos validar, solo necesitamos reenviar esa información. Reenviamos el valor de entrada, reenviamos la validez de 53 00:05:31,110 --> 00:05:38,310 la entrada y esto solo sucederá cuando la entrada se toque por cierto, por lo que cuando pierde el foco y, por supuesto, eso 54 00:05:38,310 --> 00:05:38,760 es 55 00:05:38,790 --> 00:05:40,320 solo una restricción que agregué 56 00:05:43,310 --> 00:05:48,010 aquí, que debes haber perdido el foco, tú por supuesto, también podría ir al componente 57 00:05:48,020 --> 00:05:53,060 de entrada y eliminar esto si marca para actualizar la validez y el valor en el 58 00:05:53,060 --> 00:05:59,260 componente principal para cada entrada, para cada pulsación de tecla. Ahora, una cosa adicional que quiero hacer, quiero envolver esto 59 00:05:59,260 --> 00:06:07,390 en una llamada de devolución de llamada de uso aquí, para que esta función no se reconstruya innecesariamente porque tenga en cuenta que pasamos esta función a 60 00:06:07,510 --> 00:06:13,050 cambio de entrada en el componente de entrada y allí Por otro lado, esta es una dependencia de 61 00:06:13,060 --> 00:06:13,630 este 62 00:06:13,630 --> 00:06:15,400 efecto, por lo que este efecto 63 00:06:15,430 --> 00:06:18,190 se volverá a ejecutar cada vez que esto cambie. 64 00:06:18,190 --> 00:06:22,780 Por lo tanto, no debería cambiar con demasiada frecuencia para evitar ejecuciones de efectos innecesarios 65 00:06:22,810 --> 00:06:28,900 y, por lo tanto, aquí debemos indicar nuestras dependencias y la única dependencia que tenemos es el estado del 66 00:06:29,080 --> 00:06:31,690 formulario de envío que en realidad nunca cambiará, 67 00:06:31,690 --> 00:06:32,430 por 68 00:06:32,430 --> 00:06:35,620 lo que estamos bien, esto nunca debería reconstruirse porque el 69 00:06:35,680 --> 00:06:43,690 La lógica allí no cambia, obtenemos todos los valores que necesitamos como argumentos. Con eso en la pantalla de edición de mi producto, todavía tengo mis formularios que, por supuesto, con todos los valores y las validaciones de los formularios, pero 70 00:06:50,310 --> 00:06:55,600 solo administro esto aquí porque necesito enviarlo más tarde y porque necesito derivar la validez general del formulario. No lo hago porque 71 00:06:55,600 --> 00:06:58,280 necesito administrar cada entrada aquí, lo 72 00:06:58,390 --> 00:07:05,100 hacemos desde dentro del componente de entrada. Para el envío, etc., todavía 73 00:07:05,100 --> 00:07:06,460 necesitamos 74 00:07:06,500 --> 00:07:18,810 la información sobre cada tienda, sin embargo, el valor. Ahora, si vuelvo a la entrada, no olvide que también debe establecer el valor inicial prop 75 00:07:19,320 --> 00:07:22,600 y si esto debería ser inicialmente válido, 76 00:07:22,680 --> 00:07:31,290 por lo que si vuelvo a la pantalla de edición del producto, ahora deberíamos establecer el valor inicial aquí para ¿Qué? 77 00:07:31,320 --> 00:07:35,640 Bueno, podemos verificar si tenemos un producto editado y si lo tenemos, entonces el valor inicial aquí debería 78 00:07:35,640 --> 00:07:37,150 ser editadoProduct. título, 79 00:07:37,170 --> 00:07:44,760 de lo contrario, es una cadena vacía y esto debería ser inicialmente válido, así que use este accesorio aquí 80 00:07:45,480 --> 00:07:47,480 si tenemos un producto 81 00:07:49,830 --> 00:07:51,860 editado, por lo que si 82 00:07:51,870 --> 00:08:00,780 es así, con la doble explosión aquí, si esto es cierto. Si no tenemos un producto editado, entonces esto no puede ser válido 83 00:08:00,780 --> 00:08:01,530 inicialmente, 84 00:08:01,530 --> 00:08:03,390 entonces paso falso, lo cual 85 00:08:03,390 --> 00:08:07,210 es bueno, que es lo que debería ser el caso. 86 00:08:07,280 --> 00:08:13,040 Ahora podemos copiar estas dos líneas, también en imageUrl, allí, por supuesto, reenviamos el valor de URL de 87 00:08:13,040 --> 00:08:20,400 la imagen como valor predeterminado, aparte de eso, puede permanecer así. Por el precio, nunca tendremos un valor inicial 88 00:08:20,400 --> 00:08:25,650 y nunca será inicialmente válido. Para la descripción, por otro lado, 89 00:08:25,660 --> 00:08:28,950 podemos agregar nuevamente esto y aquí señalar la descripción. 90 00:08:32,270 --> 00:08:39,050 Ahora con eso, hay una cosa que necesito arreglar en el componente de entrada que también pensé, por supuesto aquí, el 91 00:08:39,050 --> 00:08:43,450 estado del formulario ya no está disponible, en cambio tenemos nuestro estado interno 92 00:08:43,450 --> 00:08:47,950 aquí y llamé a este estado de entrada, eso es lo que devuelve mi 93 00:08:47,960 --> 00:08:49,870 reductor, por lo que deberíamos usar 94 00:08:50,120 --> 00:08:51,700 eso aquí, por supuesto. 95 00:08:51,700 --> 00:08:57,830 Entonces aquí tenemos inputState. valor como valor, es tan simple como 96 00:08:57,920 --> 00:09:03,590 eso y aquí tenemos inputState. es válido como un cheque y eso debería ser todo. 97 00:09:03,590 --> 00:09:10,060 Ahora, si guardamos esto y miramos esto, veamos si eso funciona. Si vamos aquí, tenemos todos los mensajes de error inicialmente, 98 00:09:10,060 --> 00:09:13,360 lo cual tiene sentido porque todos son inválidos inicialmente, si 99 00:09:13,790 --> 00:09:20,500 empiezo a escribir aquí, obtengo un error, no puedo encontrar la variable isValid en mi componente de entrada, que tiene que 100 00:09:20,500 --> 00:09:26,910 estar en ese controlador que se dispara por cada pulsación de tecla, probablemente aquí, sí, en el reductor, por supuesto, 101 00:09:26,920 --> 00:09:30,000 debería verificar la acción. 102 00:09:30,000 --> 00:09:32,490 isValid, no solo isValid, tengo que 103 00:09:32,730 --> 00:09:37,470 obtener esto de la acción. Entonces, con esa solución 104 00:09:37,480 --> 00:09:42,240 aquí, regresemos e intentemos esto nuevamente. Si empiezo a escribir, esto se borra, 105 00:09:42,270 --> 00:09:46,530 si revierto esto, mi error no regresa, por lo que es un pequeño 106 00:09:46,530 --> 00:09:50,800 error que tendremos que solucionar. Por el precio, 0 107 00:09:50,800 --> 00:09:55,330 no se trata como válido, uno tampoco lo es, por lo 108 00:09:55,350 --> 00:09:58,590 que la validación tiene algunos problemas, pero ingresar, 109 00:09:58,590 --> 00:10:03,490 etc. funciona, pero veamos qué hay de malo en la validación ahora. 110 00:10:03,500 --> 00:10:07,090 Bueno, por supuesto, la forma en que funciona la validación aquí, no la estamos usando. 111 00:10:07,100 --> 00:10:12,290 Tenga en cuenta que siempre verifico si este tipo de validación está habilitada para esta entrada o este tipo o este tipo y lo hacemos 112 00:10:12,290 --> 00:10:17,000 con la ayuda de estos accesorios especiales que necesitamos configurar. En este momento no hay 113 00:10:17,030 --> 00:10:22,980 validación habilitada, por lo que solo se tienen en cuenta los valores no válidos predeterminados. 114 00:10:23,060 --> 00:10:28,610 Entonces, si voy a la pantalla de edición del producto, ahora habilitamos esta validación especial configurando los accesorios 115 00:10:28,610 --> 00:10:39,170 correctos, por ejemplo, aquí en la entrada del título, requerida. En imageUrl, también se requiere. En el precio aquí, requerido y también tal vez 116 00:10:39,470 --> 00:10:47,540 mínimo igual a cero, por lo que cero es el número mínimo que tenemos que ingresar o un número mayor 117 00:10:47,540 --> 00:10:48,350 que 118 00:10:48,380 --> 00:10:58,480 ese en realidad, así que tal vez 0. 1 es nuestro número mínimo. Para la descripción, también debe ser obligatorio y tal vez también longitud 119 00:10:58,540 --> 00:11:05,100 mínima igual a 5, para tener al menos 5 caracteres. También hay una cosa adicional que debemos hacer aquí en la 120 00:11:05,100 --> 00:11:11,070 pantalla de edición del producto, esto en el controlador de cambio de entrada aquí también debe agregarse a cada entrada, 121 00:11:11,130 --> 00:11:16,870 por supuesto, no solo a la entrada del título. Por lo tanto, debemos agregar esto para 122 00:11:16,870 --> 00:11:26,760 imageUrl; de lo contrario, obtendremos un error más tarde, necesitaremos agregar esto aquí a la entrada de precios, también necesitaremos agregar esto aquí obviamente a la entrada 123 00:11:26,760 --> 00:11:30,580 de descripción y reemplazar el identificador En el camino correcto. 124 00:11:32,810 --> 00:11:36,010 Así que vamos a probar esto y notarás 125 00:11:36,040 --> 00:11:39,000 algo extraño, si escribes aquí, funciona, si 126 00:11:39,000 --> 00:11:41,210 escribes en imageUrl, no funciona 127 00:11:41,220 --> 00:11:47,300 bien, la validación no se actualiza y tampoco puedes retroceder, al menos Esto podría estar atascado. 128 00:11:47,310 --> 00:11:54,990 Entonces, si volvemos a cargar esto con un error de comando o presionando dos veces R en 129 00:11:55,010 --> 00:12:00,950 Android y le damos otra oportunidad aquí, digamos sobre el precio, notará que 130 00:12:00,950 --> 00:12:05,630 esto funciona, pero ¿por qué no funciona? si lo probaste 131 00:12:05,670 --> 00:12:10,200 en imageUrl, aquí funciona. ¿Por qué funciona si previamente edité otra entrada 132 00:12:10,200 --> 00:12:15,100 porque ahora, por ejemplo, ya no funciona en un título? Y el problema está relacionado con que esto esté atascado aquí. 133 00:12:15,390 --> 00:12:22,500 Estamos volviendo a utilizar este componente con demasiada frecuencia y la razón es muy difícil de rastrear. 134 00:12:23,010 --> 00:12:24,980 Al final, tenemos una especie de bucle infinito 135 00:12:24,990 --> 00:12:27,290 aquí y el problema es nuestro controlador de cambio de entrada. 136 00:12:27,420 --> 00:12:34,290 Estamos usando la devolución de llamada aquí para evitar recreaciones innecesarias, pero al vincularlo de esta manera, 137 00:12:34,290 --> 00:12:40,710 lo volvemos obsoleto, ahora no hay diferencia porque esto creará una nueva función vinculante para cada 138 00:12:40,800 --> 00:12:42,230 ciclo de devolución. 139 00:12:42,750 --> 00:12:49,590 Entonces, al final, lo que tenemos que hacer es eliminar el enlace aquí, eliminarlo aquí en todos estos lugares porque 140 00:12:49,590 --> 00:12:51,550 esto romperá nuestra aplicación, 141 00:12:51,780 --> 00:12:56,980 causará demasiados ciclos de devolución debido a que el uso de la devolución de llamada 142 00:12:57,210 --> 00:13:01,200 no tiene efecto y en su lugar podríamos desea reenviar un 143 00:13:01,200 --> 00:13:05,850 accesorio de identificación de título y así sucesivamente a nuestro componente de entrada. 144 00:13:06,050 --> 00:13:14,200 Así que agreguemos esto en todas estas entradas, este accesorio de ID es básicamente lo que agregué en la llamada de enlace anterior, por lo 145 00:13:14,260 --> 00:13:18,860 que simplemente reenviamos esto al componente de entrada para que podamos usarlo allí, hagamos 146 00:13:18,880 --> 00:13:23,430 esto para todas estas entradas aquí y ahora, ¿cómo podemos usar eso? 147 00:13:23,470 --> 00:13:27,910 Bien dentro de la entrada, ahora tenemos este accesorio de identificación 148 00:13:27,910 --> 00:13:30,820 disponible, así que simplemente podemos adjuntar esto. 149 00:13:30,880 --> 00:13:38,280 Entonces aquí podemos enviar accesorios. ID o simplemente ID para que no tengamos que agregar accesorios aquí y 150 00:13:38,280 --> 00:13:44,370 en su lugar extraer ID de los accesorios aquí tal como lo hicimos con el cambio de entrada y agregar ID 151 00:13:44,470 --> 00:13:50,470 como una dependencia de este efecto a partir de entonces. Y ahora con eso, todavía reenviamos el identificador 152 00:13:50,830 --> 00:13:55,630 de esta entrada, pero de una manera más elegante que evita usar el enlace, que 153 00:13:55,630 --> 00:13:59,000 al final recrea esta función para cada ciclo de renderizado 154 00:13:59,140 --> 00:14:03,430 y, por lo tanto, conduce a un bucle infinito y, por lo tanto, ahora 155 00:14:06,890 --> 00:14:15,490 si volvemos a cargar esto y nosotros vaya a la sección de administración aquí, ahora puedo ingresar algo aquí y también aquí y ahora esto funciona porque 156 00:14:15,490 --> 00:14:19,660 ahora evitamos este ciclo de renderizado infinito y obtenemos la validación como queríamos. 157 00:14:19,690 --> 00:14:26,170 Entonces, este es mi enfoque o este es el enfoque que quería mostrarle aquí, que puede usar para tener un 158 00:14:26,170 --> 00:14:31,630 componente de entrada reutilizable que haga su propia validación, que puede configurar desde el exterior y donde 159 00:14:31,630 --> 00:14:33,960 aún puede administrar el formulario general. 160 00:14:34,060 --> 00:14:36,120 Con eso, profundicemos en algunos ajustes, 161 00:14:36,220 --> 00:14:42,070 como por ejemplo diseñar este mensaje de error que estamos mostrando, este mensaje de error de validación y también 162 00:14:42,070 --> 00:14:45,310 controlar cuándo lo mostramos porque no quiero mostrarlo todo el tiempo.