En appuyant sur le bouton de détail ici dans la commande, les articles devraient exposer tous les articles que nous avons et pour
cela, je veux utiliser l'article du panier ici.
Une façon de le faire est de gérer un état interne ici à l'aide du hook d'état d'utilisation que nous importons de
React où nous contrôlons si nous affichons actuellement les détails ou non. Je vais donc nommer les détails de ce spectacle et
définir les détails du spectacle ici et initialiser
cela avec l'état d'utilisation pour qu'il soit faux afin que nous ne montrions pas les détails au départ et
maintenant quand nous appuyons sur ce bouton ici, je veux bien sûr changer cet état. Donc, dans cette fonction, j'appellerai set show details et inverserai fondamentalement la
valeur, pour cela, nous utilisons la syntaxe spéciale où nous passons une fonction à cette fonction
de réglage d'état ici, où nous obtenons l'état précédent et nous retournons ensuite un nouvel état sur la base de cet état précédent
et ici, gardez à l'esprit que
l'état précédent est en effet faux ou vrai selon ce que les détails de l'exposition étaient, donc
ici je reviendrai pas l'état précédent pour le convertir, s'il était faux, je reviendrai vrai comme un nouveau
état, si c'était vrai, je retournerai faux comme nouvel état et je le définirai pour afficher les détails.
Maintenant, nous pouvons utiliser ces informations ici pour produire du contenu de manière conditionnelle. Nous pouvons vérifier les détails de l'exposition et si cela
est vrai, et c'est maintenant notre syntaxe React que nous pouvons utiliser ici,
donc si c'est vrai, nous renvoyons cette vue ici. Cela peut sembler étrange au début, mais avec cela, nous disons si
cela est vrai et cela est vrai et c'est un raccourci pour Javascript pour vérifier si cela est vrai, eh bien
c'est toujours vrai parce que c'est un objet à la fin donc cela sera ensuite rendu,
c'est ainsi que Javascript fonctionne.
L'alternative serait une expression ternaire ou une variable que vous définissez ici que vous modifiez avec une
vérification if puis que vous éditez là-bas.
Je vais donc utiliser cette expression en ligne ici où je produis cette vue si les détails sont
vrais et dans cette vue, je veux sortir tous les éléments.
Donc, dans cette vue, je vais avoir une sortie dynamique où je passe en revue tous mes articles
que je m'attends à obtenir sur les articles prop de
ce composant d'article de commande et là, nous pouvons mapper nos données dans une liste d'éléments jsx, dans un liste des composants.
Donc ici, je reçois bien sûr mon article de panier à la fin parce que les articles d'une commande ne sont que les articles que nous avions dans le panier, donc
la carte exécute cette fonction sur chaque article de panier pour ainsi dire et nous donne cet article de panier qu'il recherche
actuellement et maintenant pour cet article, nous devons retourner un nouvel élément jsx que nous voulons sortir et c'est là
que j'utilise mon article de panier pour sortir cela.
Donc, ici, je produis un article de panier comme, pas un panier mais un article de panier comme celui-ci. Maintenant, l'article du panier si vous avez un regard a
pris la quantité et le titre comme entrées et il voulait également le montant.
De plus, nous avions là le bouton Supprimer que je ne veux pas sur le poste de
commande, nous
devons donc faire quelque chose mais concentrons-nous sur la quantité, le titre et le montant pour le moment et passons ces données.
Alors ici, la quantité est cartItem. quantité, montant est cartItem.
et rappelez-vous maintenant que tout ce que nous stockons ici dans les commandes, dans les articles est à la fin ce que nous obtenons comme articles
ici dans notre réducteur de
commandes, donc ce que nous obtenons dans notre action. Nous obtenons donc nos articles de panier là-bas
et si nous regardons l'écran du panier et regardons ce que nous passons là-bas, puis pour ajouter de l'ordre, nous passons cette constante d'articles de panier
qui contient ce tableau que nous générons ici à la fin .
Donc, à la fin, nous avons un tableau de ces objets là-dedans,
donc nous avons le titre du produit, le prix du produit, la quantité et la somme là-dedans et c'est ce que nous pouvons
maintenant travailler ici dans l'article de commande où je crée mon panier articles, je passe dans le cartItem. quantité, pour le montant, je
passe dans cartItem. somme et dernier mais non le moindre dans l'article
du panier, nous avons également besoin du titre, ce sera donc cartItem. productTitle ce que je passe ici.
Maintenant, le problème restant, comme je l'ai dit, est qu'un élément du panier a cette icône tactile ici pour le
supprimer, cela n'a de sens que si nous utilisons ce composant à l'intérieur d'un panier,
pas lorsque nous l'utilisons dans une commande que nous voulons sortir, ce qui est bien sûr en lecture seule.
Donc, la solution est qu'ici dans l'article du panier, nous enveloppons cela et nous attendons simplement à obtenir un accessoire qui dit par exemple
supprimable et seulement si c'est vrai, même raccourci qu'il y
a une seconde, nous produisons cette opacité tactile, donc cette icône
en général, sinon
nous ne le faisons pas.
Alors maintenant, nous avons cet accessoire supprimable dans l'article du panier qui doit être défini pour afficher cette icône de corbeille.
Cela signifie que dans l'écran du panier où nous voulons avoir cette icône de corbeille, lorsque nous utilisons l'élément du
panier, nous devons définir la suppression et le définir comme cela suffit, cela
le définit sur true et nous le montrerons. D'un autre côté, dans notre article de commande
où j'utilise également l'article du panier, je ne définis pas de suppression et donc nous ne rendrons
pas cette icône de corbeille. Alors jetons un coup
d'œil à cela, enregistrons-le et ajoutons ces articles au panier, appuyez
sur la commande maintenant, puis passez aux commandes, cliquez sur afficher les détails et j'obtiens une erreur, la carte des
articles d'accessoires ne peut pas être appelée car undefined est pas un objet.
Une raison à cela est que j'essaie de parcourir tous mes articles ici sur l'article de commande,
mais dans l'écran des commandes, je ne configure jamais l'accessoire d'articles ici.
Donc, dans l'écran des commandes de l'article de commande, en plus de transmettre le montant et la date, nous devons également
passer les articles pour cet article de commande que nous générons et qui bien sûr peuvent être reçus ou obtenus à partir de
nos données de l'article. article qui est une commande unique
et maintenant si nous regardons le modèle de commande, nous aurons ici cette propriété d'articles. Nous pouvons donc
accéder. articles ici et maintenant, nous
passons les articles dans l'article de commande et donc maintenant nous pouvons également le produire là-bas.
Alors maintenant, si vous essayez à nouveau et que nous passons une nouvelle commande ici et que nous regardons simplement cela, maintenant cela
fonctionne, nous avons un problème avec la clé ici que nous corrigerons dans une seconde.
Essayons d'abord cela également sur Android, cliquez sur commander maintenant, puis passez aux commandes, montrez les détails,
obtenez le même avertissement mais j'ai écrit que cela fonctionne généralement, bien que ce serait bien si ces éléments de commande étaient
un peu plus larges c'est aussi quelque chose que je veux corriger. Donc, pour corriger ces erreurs que nous avons, l'avertissement
vient du
fait qu'ici je mappe mes données dans les composants React et si nous le faisons manuellement avec la carte
ici, nous devons attribuer cet accessoire clé, c'est une exigence fondamentale de React que vous j'aurai
aussi dans React pour le web.
Donc, ici, vous devez pointer vers un identifiant unique et chaque article du panier ici à la fin a un ID de produit
que nous pouvons utiliser et vous pouvez le confirmer dans l'écran du panier où vous créez ce
tableau d'articles du
panier à la fin, là nous stockons cet ID de produit et qui sera unique par ligne, donc ça va.
Maintenant, concernant la largeur de ceci, nous pouvons ajouter un style ici, détailler des éléments par exemple et l'ajouter là-bas dans la feuille de style
et ici, assurez-vous
simplement que nous définissons une largeur de 100% afin que nous prenions
la pleine largeur disponible pour le articles du panier. Et maintenant, si nous essayons à nouveau et que nous commandons cela, puis nous allons
sur notre écran de commandes et
montrons les détails, maintenant cela ressemble à cela et maintenant nous pouvons afficher les détails et les masquer, une petite
amélioration est peut-être que cela le texte doit
être mis à jour, donc lorsque nous regardons les détails, cela devrait dire masquer les détails et ne pas
afficher les détails et bien sûr, c'est aussi facile à mettre en œuvre dans les éléments de commande, nous avons
ce bouton, nous avons juste besoin de définir ce texte de manière dynamique et de vérifier si afficher les détails qui sont notre état
interne ici sont vrais.
Si c'est le cas, alors ici, je veux dire cacher les détails, sinon je dirai montrer les détails et maintenant ce
texte devrait changer dynamiquement lorsque nous montrons ou cachons nos détails.
Donc, si nous commandons celui-ci la dernière fois ici, nous y jetons un
coup d'œil, maintenant c'est afficher les détails, maintenant c'est cacher
les détails, alors maintenant cela fonctionne vraiment de la manière dont cela devrait fonctionner.
Maintenant, passons également une autre commande, juste pour confirmer que cela fonctionne vraiment. Si nous commandons ceci ici, nous allons à
l'écran des commandes, maintenant vous voyez également cette deuxième commande et vous pouvez les contrôler indépendamment.
Voici donc l'écran de commande et comment nous pouvons y sortir des commandes et comment nous pouvons même réutiliser l'article du panier ici.