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,
quiero usar el artículo del carrito aquí.
Una forma de hacerlo es manejar algún estado interno aquí con la ayuda del enlace de estado de uso que importamos desde
React donde controlamos si actualmente estamos viendo los detalles o no. Así que nombraré los detalles de este programa y
estableceré los detalles del programa aquí e
inicializaré esto con el estado de uso como falso para que no muestremos los detalles inicialmente y
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
invertiremos el valor, para esto usamos la sintaxis especial donde pasamos una función a esa
función de configuración de estado aquí, donde obtenemos el estado anterior y luego devolvemos un nuevo estado basado en ese estado anterior
y aquí, tenga en cuenta que
el estado anterior es de hecho falso o verdadero dependiendo de los detalles del programa, por
lo que aquí no devolveré el estado anterior para convertir esto, si era falso, volveré verdadero como
nuevo estado, si era cierto, devolveré falso como un nuevo estado y lo configuraré para mostrar detalles.
Ahora podemos usar esa información aquí para generar algún contenido condicionalmente. Podemos verificar los detalles del show y si eso es
cierto y esta es ahora nuestra sintaxis React, podemos usar aquí, así que
si esto es cierto, entonces devolveremos esta vista aquí. Puede parecer extraño al principio, pero con eso estamos diciendo si esto
es cierto y esto es cierto y este es un atajo para que Javascript verifique si esto es cierto, bueno,
esto siempre es verdadero porque esto es un objeto al final, así que esto se representará,
así es como funciona Javascript.
La alternativa sería una expresión ternaria o una variable que establezca aquí y que cambie con una
comprobación if y luego se muestre allí.
Así que usaré esta expresión en línea aquí donde genero esta vista si mostrar detalles es
verdadero y en esta vista, quiero mostrar todos los elementos.
Entonces, en esta vista, tendré una salida dinámica donde reviso todos mis artículos que espero obtener
en el soporte de artículos de este componente de
artículo de pedido y allí, podemos asignar nuestros datos en una lista de elementos jsx, en un lista de componentes.
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
mapa ejecuta esta función en cada artículo del carrito, por decirlo, y nos da ese artículo del carrito que está buscando
actualmente y ahora para este artículo, tenemos que devolver un nuevo elemento jsx que queremos generar y ahí es
donde uso mi artículo del carrito para generarlo.
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,
tomó la cantidad y el título como entradas y también quería la cantidad.
Además, teníamos el botón Eliminar allí que no quiero en el artículo del pedido, por lo que
tenemos que hacer
algo al respecto, pero centrémonos en la cantidad, el título y la cantidad por el momento y pasamos estas piezas de datos.
Entonces, aquí, la cantidad es cartItem. cantidad, cantidad es cartItem.
y ahora recuerde que todo lo que almacenamos aquí en pedidos, en artículos es al final lo que obtenemos como artículos aquí
en nuestro reductor de pedidos,
así que lo que obtenemos en nuestra acción. Entonces obtenemos nuestros artículos del carrito allí y
si miramos la pantalla del carrito y observamos lo que pasamos allí, entonces para agregar pedido, pasamos los artículos de este carrito constantes
que mantienen esta matriz que generamos aquí al final .
Entonces, al final, tenemos una variedad de tales objetos allí, así que
tenemos el título del producto, el precio del producto, la cantidad y la suma allí y eso es con lo que ahora
podemos trabajar aquí en el artículo de pedido donde creo mi carrito artículos, paso en el carrito cantidad, por la cantidad,
paso en cartItem. suma y último pero no menos importante en el
artículo del carrito, también necesitamos el título, por lo que será cartItem. productTitle lo que paso aquí.
Ahora, el problema restante, como dije, es que un artículo de carrito tiene este ícono táctil aquí para eliminarlo,
esto solo tiene sentido si usamos este componente dentro de un carrito, no cuando
lo usamos dentro de un pedido que queremos enviar, que es por supuesto de solo lectura.
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
y solo si eso es cierto, el mismo atajo que hace
un segundo, mostramos esta opacidad táctil, por lo que este ícono
en general, de
lo contrario no lo hacemos.
Así que ahora tenemos este accesorio borrable en el artículo del carrito que debe configurarse para mostrar ese ícono de basura.
Esto significa que en la pantalla del carrito donde queremos tener ese ícono de la papelera, cuando usamos el artículo
del carrito allí, necesitamos establecer que se pueda eliminar y establecerlo de esta manera,
esto lo establece en verdadero y lo mostraremos. Por otro lado, en nuestro artículo de pedido
donde también uso el artículo del carrito, no configuro borrable y, por lo tanto, no mostraremos
este ícono de papelera. Así que echemos un vistazo
a esto, guárdelo y agreguemos estos artículos al carrito, presione el
pedido ahora y luego vaya a los pedidos, haga clic en mostrar detalles y obtengo un error, no se puede llamar
al mapa de artículos de utilería porque no está definido No es un objeto.
Una razón para eso es que estoy tratando de recorrer todos mis artículos aquí en el artículo del pedido,
pero en la pantalla de pedidos, nunca configuro el accesorio de artículos aquí.
Entonces, en la pantalla de pedidos para el artículo de pedido, además de pasar el monto y la fecha,
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
nuestros datos de artículo. artículo que es un pedido único
y ahora si echamos un vistazo al modelo de pedido, allí tendremos esta propiedad de artículos aquí. Para que podamos
acceder. Los elementos aquí y
ahora los pasamos al pedido y, por lo tanto, ahora también podemos enviarlos allí.
Así que ahora, si lo intenta de nuevo y hacemos un nuevo pedido aquí y simplemente miramos esto, ahora esto
funciona, tenemos un problema con la clave aquí que solucionaremos en un segundo.
Primero, intentemos esto también en Android, haga clic en ordenar ahora, luego vaya a pedidos, muestre
los detalles, obtenga la misma advertencia, pero he escrito que generalmente funciona, aunque sería bueno si estos artículos de pedido fueran un
poco más amplios así que eso también es algo que quiero arreglar. Entonces, para solucionar estos errores que tenemos, la advertencia
se deriva
del hecho de que aquí estoy mapeando mis datos en componentes React y si hacemos esto manualmente con el
mapa aquí, necesitamos asignar ese accesorio clave, ese es un requisito central de React que usted
debe Tendré en React para web también.
Entonces, aquí, debe apuntar a un identificador único y cada artículo del carrito aquí al final tiene una ID de producto que
podemos usar y puede confirmar esto en la pantalla del carrito donde crea esa variedad de artículos
del carrito
al final, allí almacenamos ese ID de producto y que será único por fila, por lo que está bien.
Ahora con respecto al ancho de esto, podemos agregar un estilo aquí, detallar elementos por ejemplo y agregarlo allí abajo en la hoja de
estilo y aquí,
simplemente asegúrese de establecer un ancho del 100% para que tomemos
el ancho completo disponible para el artículos de carrito. Y ahora, si intentamos esto de nuevo y pedimos esto y luego vamos
a nuestra pantalla de pedidos
y mostramos los detalles, ahora esto se ve como debería verse y ahora podemos ver los detalles
y ocultarlos, una pequeña mejora quizás sea
que esto el texto debe actualizarse, así que cuando vemos los detalles, esto debería decir ocultar
detalles y no mostrar detalles y, por supuesto, eso también es fácil de implementar en los elementos
de pedido, ahí tenemos este botón, solo necesitamos configurar este texto dinámicamente y verificar si mostrar Detalles que es nuestro estado
interno aquí es cierto.
Si ese es el caso, entonces aquí quiero decir ocultar detalles, de lo contrario diré mostrar detalles y ahora este texto
debería cambiar dinámicamente a medida que mostramos u ocultamos nuestros detalles.
Entonces, si pedimos esto por última vez aquí, tenemos un vistazo a
esto, ahora es mostrar detalles, ahora es ocultar detalles,
así que ahora realmente funciona de la manera en que debería funcionar.
Ahora también hagamos otro pedido, solo para confirmar que esto realmente funciona. Si pedimos esto aquí, vamos a la
pantalla de pedidos, ahora también verá ese segundo pedido y podrá controlarlos de forma independiente.
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í.