1 00:00:02,060 --> 00:00:06,950 Al presionar el botón de detalles aquí en los artículos de pedido, debería exponer todos los artículos que tenemos y para esto, 2 00:00:06,950 --> 00:00:08,810 quiero usar el artículo del carrito aquí. 3 00:00:08,840 --> 00:00:14,150 Una forma de hacerlo es manejar algún estado interno aquí con la ayuda del enlace de estado de uso que importamos desde 4 00:00:14,150 --> 00:00:20,000 React donde controlamos si actualmente estamos viendo los detalles o no. Así que nombraré los detalles de este programa y 5 00:00:20,120 --> 00:00:22,730 estableceré los detalles del programa aquí e 6 00:00:24,300 --> 00:00:29,680 inicializaré esto con el estado de uso como falso para que no muestremos los detalles inicialmente y 7 00:00:30,000 --> 00:00:38,190 ahora cuando presionamos este botón aquí, por supuesto, quiero cambiar este estado. Entonces, en esta función, llamaré a set show details y básicamente 8 00:00:38,200 --> 00:00:43,690 invertiremos el valor, para esto usamos la sintaxis especial donde pasamos una función a esa 9 00:00:43,690 --> 00:00:51,370 función de configuración de estado aquí, donde obtenemos el estado anterior y luego devolvemos un nuevo estado basado en ese estado anterior 10 00:00:51,370 --> 00:00:53,610 y aquí, tenga en cuenta que 11 00:00:53,680 --> 00:00:59,290 el estado anterior es de hecho falso o verdadero dependiendo de los detalles del programa, por 12 00:00:59,290 --> 00:01:05,320 lo que aquí no devolveré el estado anterior para convertir esto, si era falso, volveré verdadero como 13 00:01:05,320 --> 00:01:11,200 nuevo estado, si era cierto, devolveré falso como un nuevo estado y lo configuraré para mostrar detalles. 14 00:01:11,200 --> 00:01:18,130 Ahora podemos usar esa información aquí para generar algún contenido condicionalmente. Podemos verificar los detalles del show y si eso es 15 00:01:18,730 --> 00:01:22,930 cierto y esta es ahora nuestra sintaxis React, podemos usar aquí, así que 16 00:01:22,930 --> 00:01:29,200 si esto es cierto, entonces devolveremos esta vista aquí. Puede parecer extraño al principio, pero con eso estamos diciendo si esto 17 00:01:29,200 --> 00:01:34,340 es cierto y esto es cierto y este es un atajo para que Javascript verifique si esto es cierto, bueno, 18 00:01:34,480 --> 00:01:38,380 esto siempre es verdadero porque esto es un objeto al final, así que esto se representará, 19 00:01:38,380 --> 00:01:39,830 así es como funciona Javascript. 20 00:01:39,850 --> 00:01:45,430 La alternativa sería una expresión ternaria o una variable que establezca aquí y que cambie con una 21 00:01:45,430 --> 00:01:47,920 comprobación if y luego se muestre allí. 22 00:01:47,920 --> 00:01:53,500 Así que usaré esta expresión en línea aquí donde genero esta vista si mostrar detalles es 23 00:01:53,560 --> 00:01:57,400 verdadero y en esta vista, quiero mostrar todos los elementos. 24 00:01:57,490 --> 00:02:02,650 Entonces, en esta vista, tendré una salida dinámica donde reviso todos mis artículos que espero obtener 25 00:02:02,650 --> 00:02:05,920 en el soporte de artículos de este componente de 26 00:02:05,920 --> 00:02:12,400 artículo de pedido y allí, podemos asignar nuestros datos en una lista de elementos jsx, en un lista de componentes. 27 00:02:13,150 --> 00:02:21,640 Entonces, por supuesto, obtengo mi artículo del carrito al final porque los artículos en un pedido son solo los artículos que teníamos en el carrito, por lo que el 28 00:02:21,640 --> 00:02:27,610 mapa ejecuta esta función en cada artículo del carrito, por decirlo, y nos da ese artículo del carrito que está buscando 29 00:02:27,610 --> 00:02:33,190 actualmente y ahora para este artículo, tenemos que devolver un nuevo elemento jsx que queremos generar y ahí es 30 00:02:33,190 --> 00:02:35,810 donde uso mi artículo del carrito para generarlo. 31 00:02:35,860 --> 00:02:45,490 Entonces, aquí, envío el artículo del carrito como, no el carrito sino el artículo del carrito como este. Ahora el artículo del carrito, si tiene un vistazo, 32 00:02:45,530 --> 00:02:51,920 tomó la cantidad y el título como entradas y también quería la cantidad. 33 00:02:51,920 --> 00:02:57,050 Además, teníamos el botón Eliminar allí que no quiero en el artículo del pedido, por lo que 34 00:02:57,050 --> 00:02:57,970 tenemos que hacer 35 00:02:58,250 --> 00:03:04,610 algo al respecto, pero centrémonos en la cantidad, el título y la cantidad por el momento y pasamos estas piezas de datos. 36 00:03:04,610 --> 00:03:13,810 Entonces, aquí, la cantidad es cartItem. cantidad, cantidad es cartItem. 37 00:03:13,820 --> 00:03:20,810 y ahora recuerde que todo lo que almacenamos aquí en pedidos, en artículos es al final lo que obtenemos como artículos aquí 38 00:03:20,810 --> 00:03:22,550 en nuestro reductor de pedidos, 39 00:03:22,550 --> 00:03:27,430 así que lo que obtenemos en nuestra acción. Entonces obtenemos nuestros artículos del carrito allí y 40 00:03:27,430 --> 00:03:33,950 si miramos la pantalla del carrito y observamos lo que pasamos allí, entonces para agregar pedido, pasamos los artículos de este carrito constantes 41 00:03:33,950 --> 00:03:36,970 que mantienen esta matriz que generamos aquí al final . 42 00:03:37,010 --> 00:03:39,970 Entonces, al final, tenemos una variedad de tales objetos allí, así que 43 00:03:40,010 --> 00:03:45,110 tenemos el título del producto, el precio del producto, la cantidad y la suma allí y eso es con lo que ahora 44 00:03:45,110 --> 00:03:52,970 podemos trabajar aquí en el artículo de pedido donde creo mi carrito artículos, paso en el carrito cantidad, por la cantidad, 45 00:03:52,970 --> 00:03:59,850 paso en cartItem. suma y último pero no menos importante en el 46 00:03:59,860 --> 00:04:08,810 artículo del carrito, también necesitamos el título, por lo que será cartItem. productTitle lo que paso aquí. 47 00:04:10,420 --> 00:04:16,130 Ahora, el problema restante, como dije, es que un artículo de carrito tiene este ícono táctil aquí para eliminarlo, 48 00:04:16,130 --> 00:04:20,680 esto solo tiene sentido si usamos este componente dentro de un carrito, no cuando 49 00:04:20,690 --> 00:04:25,890 lo usamos dentro de un pedido que queremos enviar, que es por supuesto de solo lectura. 50 00:04:26,030 --> 00:04:34,430 Entonces, la solución es que aquí en el artículo del carrito, envolvemos esto y simplemente esperamos obtener un accesorio que diga, por ejemplo, borrable 51 00:04:34,430 --> 00:04:37,990 y solo si eso es cierto, el mismo atajo que hace 52 00:04:38,000 --> 00:04:41,780 un segundo, mostramos esta opacidad táctil, por lo que este ícono 53 00:04:41,810 --> 00:04:43,130 en general, de 54 00:04:43,220 --> 00:04:45,060 lo contrario no lo hacemos. 55 00:04:45,080 --> 00:04:51,150 Así que ahora tenemos este accesorio borrable en el artículo del carrito que debe configurarse para mostrar ese ícono de basura. 56 00:04:51,170 --> 00:04:57,260 Esto significa que en la pantalla del carrito donde queremos tener ese ícono de la papelera, cuando usamos el artículo 57 00:04:57,620 --> 00:05:01,790 del carrito allí, necesitamos establecer que se pueda eliminar y establecerlo de esta manera, 58 00:05:01,790 --> 00:05:07,280 esto lo establece en verdadero y lo mostraremos. Por otro lado, en nuestro artículo de pedido 59 00:05:07,430 --> 00:05:12,830 donde también uso el artículo del carrito, no configuro borrable y, por lo tanto, no mostraremos 60 00:05:12,830 --> 00:05:16,530 este ícono de papelera. Así que echemos un vistazo 61 00:05:16,530 --> 00:05:20,550 a esto, guárdelo y agreguemos estos artículos al carrito, presione el 62 00:05:20,550 --> 00:05:27,760 pedido ahora y luego vaya a los pedidos, haga clic en mostrar detalles y obtengo un error, no se puede llamar 63 00:05:27,780 --> 00:05:32,310 al mapa de artículos de utilería porque no está definido No es un objeto. 64 00:05:32,500 --> 00:05:37,800 Una razón para eso es que estoy tratando de recorrer todos mis artículos aquí en el artículo del pedido, 65 00:05:37,860 --> 00:05:41,640 pero en la pantalla de pedidos, nunca configuro el accesorio de artículos aquí. 66 00:05:41,640 --> 00:05:47,280 Entonces, en la pantalla de pedidos para el artículo de pedido, además de pasar el monto y la fecha, 67 00:05:47,280 --> 00:05:53,460 también necesitamos pasar los artículos para ese artículo de pedido que estamos enviando y que, por supuesto, pueden recibirse o obtenerse de 68 00:05:53,550 --> 00:05:56,350 nuestros datos de artículo. artículo que es un pedido único 69 00:05:56,350 --> 00:06:03,030 y ahora si echamos un vistazo al modelo de pedido, allí tendremos esta propiedad de artículos aquí. Para que podamos 70 00:06:03,030 --> 00:06:05,930 acceder. Los elementos aquí y 71 00:06:06,040 --> 00:06:10,570 ahora los pasamos al pedido y, por lo tanto, ahora también podemos enviarlos allí. 72 00:06:10,570 --> 00:06:17,720 Así que ahora, si lo intenta de nuevo y hacemos un nuevo pedido aquí y simplemente miramos esto, ahora esto 73 00:06:17,740 --> 00:06:22,540 funciona, tenemos un problema con la clave aquí que solucionaremos en un segundo. 74 00:06:22,540 --> 00:06:27,020 Primero, intentemos esto también en Android, haga clic en ordenar ahora, luego vaya a pedidos, muestre 75 00:06:27,310 --> 00:06:33,220 los detalles, obtenga la misma advertencia, pero he escrito que generalmente funciona, aunque sería bueno si estos artículos de pedido fueran un 76 00:06:33,220 --> 00:06:40,410 poco más amplios así que eso también es algo que quiero arreglar. Entonces, para solucionar estos errores que tenemos, la advertencia 77 00:06:40,410 --> 00:06:41,430 se deriva 78 00:06:41,430 --> 00:06:48,840 del hecho de que aquí estoy mapeando mis datos en componentes React y si hacemos esto manualmente con el 79 00:06:48,840 --> 00:06:55,230 mapa aquí, necesitamos asignar ese accesorio clave, ese es un requisito central de React que usted 80 00:06:55,230 --> 00:06:57,840 debe Tendré en React para web también. 81 00:06:57,840 --> 00:07:05,100 Entonces, aquí, debe apuntar a un identificador único y cada artículo del carrito aquí al final tiene una ID de producto que 82 00:07:05,100 --> 00:07:10,950 podemos usar y puede confirmar esto en la pantalla del carrito donde crea esa variedad de artículos 83 00:07:10,950 --> 00:07:12,030 del carrito 84 00:07:12,030 --> 00:07:18,350 al final, allí almacenamos ese ID de producto y que será único por fila, por lo que está bien. 85 00:07:18,390 --> 00:07:28,740 Ahora con respecto al ancho de esto, podemos agregar un estilo aquí, detallar elementos por ejemplo y agregarlo allí abajo en la hoja de 86 00:07:28,740 --> 00:07:30,400 estilo y aquí, 87 00:07:30,470 --> 00:07:35,370 simplemente asegúrese de establecer un ancho del 100% para que tomemos 88 00:07:35,580 --> 00:07:43,820 el ancho completo disponible para el artículos de carrito. Y ahora, si intentamos esto de nuevo y pedimos esto y luego vamos 89 00:07:43,880 --> 00:07:45,450 a nuestra pantalla de pedidos 90 00:07:45,470 --> 00:07:50,630 y mostramos los detalles, ahora esto se ve como debería verse y ahora podemos ver los detalles 91 00:07:50,630 --> 00:07:52,840 y ocultarlos, una pequeña mejora quizás sea 92 00:07:52,880 --> 00:07:57,800 que esto el texto debe actualizarse, así que cuando vemos los detalles, esto debería decir ocultar 93 00:07:57,800 --> 00:08:02,950 detalles y no mostrar detalles y, por supuesto, eso también es fácil de implementar en los elementos 94 00:08:03,020 --> 00:08:09,230 de pedido, ahí tenemos este botón, solo necesitamos configurar este texto dinámicamente y verificar si mostrar Detalles que es nuestro estado 95 00:08:09,230 --> 00:08:10,610 interno aquí es cierto. 96 00:08:10,610 --> 00:08:19,620 Si ese es el caso, entonces aquí quiero decir ocultar detalles, de lo contrario diré mostrar detalles y ahora este texto 97 00:08:19,620 --> 00:08:25,010 debería cambiar dinámicamente a medida que mostramos u ocultamos nuestros detalles. 98 00:08:25,070 --> 00:08:28,400 Entonces, si pedimos esto por última vez aquí, tenemos un vistazo a 99 00:08:28,400 --> 00:08:31,170 esto, ahora es mostrar detalles, ahora es ocultar detalles, 100 00:08:31,280 --> 00:08:34,700 así que ahora realmente funciona de la manera en que debería funcionar. 101 00:08:34,710 --> 00:08:41,630 Ahora también hagamos otro pedido, solo para confirmar que esto realmente funciona. Si pedimos esto aquí, vamos a la 102 00:08:41,630 --> 00:08:48,000 pantalla de pedidos, ahora también verá ese segundo pedido y podrá controlarlos de forma independiente. 103 00:08:48,080 --> 00:08:53,540 Así que esta es la pantalla de pedido y cómo podemos enviar pedidos allí y cómo podemos reutilizar el artículo del carrito aquí.