1 00:00:02,060 --> 00:00:06,950 En appuyant sur le bouton de détail ici dans la commande, les articles devraient exposer tous les articles que nous avons et pour 2 00:00:06,950 --> 00:00:08,810 cela, je veux utiliser l'article du panier ici. 3 00:00:08,840 --> 00:00:14,150 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 4 00:00:14,150 --> 00:00:20,000 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 5 00:00:20,120 --> 00:00:22,730 définir les détails du spectacle ici et initialiser 6 00:00:24,300 --> 00:00:29,680 cela avec l'état d'utilisation pour qu'il soit faux afin que nous ne montrions pas les détails au départ et 7 00:00:30,000 --> 00:00:38,190 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 8 00:00:38,200 --> 00:00:43,690 valeur, pour cela, nous utilisons la syntaxe spéciale où nous passons une fonction à cette fonction 9 00:00:43,690 --> 00:00:51,370 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 10 00:00:51,370 --> 00:00:53,610 et ici, gardez à l'esprit que 11 00:00:53,680 --> 00:00:59,290 l'état précédent est en effet faux ou vrai selon ce que les détails de l'exposition étaient, donc 12 00:00:59,290 --> 00:01:05,320 ici je reviendrai pas l'état précédent pour le convertir, s'il était faux, je reviendrai vrai comme un nouveau 13 00:01:05,320 --> 00:01:11,200 état, si c'était vrai, je retournerai faux comme nouvel état et je le définirai pour afficher les détails. 14 00:01:11,200 --> 00:01:18,130 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 15 00:01:18,730 --> 00:01:22,930 est vrai, et c'est maintenant notre syntaxe React que nous pouvons utiliser ici, 16 00:01:22,930 --> 00:01:29,200 donc si c'est vrai, nous renvoyons cette vue ici. Cela peut sembler étrange au début, mais avec cela, nous disons si 17 00:01:29,200 --> 00:01:34,340 cela est vrai et cela est vrai et c'est un raccourci pour Javascript pour vérifier si cela est vrai, eh bien 18 00:01:34,480 --> 00:01:38,380 c'est toujours vrai parce que c'est un objet à la fin donc cela sera ensuite rendu, 19 00:01:38,380 --> 00:01:39,830 c'est ainsi que Javascript fonctionne. 20 00:01:39,850 --> 00:01:45,430 L'alternative serait une expression ternaire ou une variable que vous définissez ici que vous modifiez avec une 21 00:01:45,430 --> 00:01:47,920 vérification if puis que vous éditez là-bas. 22 00:01:47,920 --> 00:01:53,500 Je vais donc utiliser cette expression en ligne ici où je produis cette vue si les détails sont 23 00:01:53,560 --> 00:01:57,400 vrais et dans cette vue, je veux sortir tous les éléments. 24 00:01:57,490 --> 00:02:02,650 Donc, dans cette vue, je vais avoir une sortie dynamique où je passe en revue tous mes articles 25 00:02:02,650 --> 00:02:05,920 que je m'attends à obtenir sur les articles prop de 26 00:02:05,920 --> 00:02:12,400 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. 27 00:02:13,150 --> 00:02:21,640 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 28 00:02:21,640 --> 00:02:27,610 la carte exécute cette fonction sur chaque article de panier pour ainsi dire et nous donne cet article de panier qu'il recherche 29 00:02:27,610 --> 00:02:33,190 actuellement et maintenant pour cet article, nous devons retourner un nouvel élément jsx que nous voulons sortir et c'est là 30 00:02:33,190 --> 00:02:35,810 que j'utilise mon article de panier pour sortir cela. 31 00:02:35,860 --> 00:02:45,490 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 32 00:02:45,530 --> 00:02:51,920 pris la quantité et le titre comme entrées et il voulait également le montant. 33 00:02:51,920 --> 00:02:57,050 De plus, nous avions là le bouton Supprimer que je ne veux pas sur le poste de 34 00:02:57,050 --> 00:02:57,970 commande, nous 35 00:02:58,250 --> 00:03:04,610 devons donc faire quelque chose mais concentrons-nous sur la quantité, le titre et le montant pour le moment et passons ces données. 36 00:03:04,610 --> 00:03:13,810 Alors ici, la quantité est cartItem. quantité, montant est cartItem. 37 00:03:13,820 --> 00:03:20,810 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 38 00:03:20,810 --> 00:03:22,550 ici dans notre réducteur de 39 00:03:22,550 --> 00:03:27,430 commandes, donc ce que nous obtenons dans notre action. Nous obtenons donc nos articles de panier là-bas 40 00:03:27,430 --> 00:03:33,950 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 41 00:03:33,950 --> 00:03:36,970 qui contient ce tableau que nous générons ici à la fin . 42 00:03:37,010 --> 00:03:39,970 Donc, à la fin, nous avons un tableau de ces objets là-dedans, 43 00:03:40,010 --> 00:03:45,110 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 44 00:03:45,110 --> 00:03:52,970 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 45 00:03:52,970 --> 00:03:59,850 passe dans cartItem. somme et dernier mais non le moindre dans l'article 46 00:03:59,860 --> 00:04:08,810 du panier, nous avons également besoin du titre, ce sera donc cartItem. productTitle ce que je passe ici. 47 00:04:10,420 --> 00:04:16,130 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 48 00:04:16,130 --> 00:04:20,680 supprimer, cela n'a de sens que si nous utilisons ce composant à l'intérieur d'un panier, 49 00:04:20,690 --> 00:04:25,890 pas lorsque nous l'utilisons dans une commande que nous voulons sortir, ce qui est bien sûr en lecture seule. 50 00:04:26,030 --> 00:04:34,430 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 51 00:04:34,430 --> 00:04:37,990 supprimable et seulement si c'est vrai, même raccourci qu'il y 52 00:04:38,000 --> 00:04:41,780 a une seconde, nous produisons cette opacité tactile, donc cette icône 53 00:04:41,810 --> 00:04:43,130 en général, sinon 54 00:04:43,220 --> 00:04:45,060 nous ne le faisons pas. 55 00:04:45,080 --> 00:04:51,150 Alors maintenant, nous avons cet accessoire supprimable dans l'article du panier qui doit être défini pour afficher cette icône de corbeille. 56 00:04:51,170 --> 00:04:57,260 Cela signifie que dans l'écran du panier où nous voulons avoir cette icône de corbeille, lorsque nous utilisons l'élément du 57 00:04:57,620 --> 00:05:01,790 panier, nous devons définir la suppression et le définir comme cela suffit, cela 58 00:05:01,790 --> 00:05:07,280 le définit sur true et nous le montrerons. D'un autre côté, dans notre article de commande 59 00:05:07,430 --> 00:05:12,830 où j'utilise également l'article du panier, je ne définis pas de suppression et donc nous ne rendrons 60 00:05:12,830 --> 00:05:16,530 pas cette icône de corbeille. Alors jetons un coup 61 00:05:16,530 --> 00:05:20,550 d'œil à cela, enregistrons-le et ajoutons ces articles au panier, appuyez 62 00:05:20,550 --> 00:05:27,760 sur la commande maintenant, puis passez aux commandes, cliquez sur afficher les détails et j'obtiens une erreur, la carte des 63 00:05:27,780 --> 00:05:32,310 articles d'accessoires ne peut pas être appelée car undefined est pas un objet. 64 00:05:32,500 --> 00:05:37,800 Une raison à cela est que j'essaie de parcourir tous mes articles ici sur l'article de commande, 65 00:05:37,860 --> 00:05:41,640 mais dans l'écran des commandes, je ne configure jamais l'accessoire d'articles ici. 66 00:05:41,640 --> 00:05:47,280 Donc, dans l'écran des commandes de l'article de commande, en plus de transmettre le montant et la date, nous devons également 67 00:05:47,280 --> 00:05:53,460 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 68 00:05:53,550 --> 00:05:56,350 nos données de l'article. article qui est une commande unique 69 00:05:56,350 --> 00:06:03,030 et maintenant si nous regardons le modèle de commande, nous aurons ici cette propriété d'articles. Nous pouvons donc 70 00:06:03,030 --> 00:06:05,930 accéder. articles ici et maintenant, nous 71 00:06:06,040 --> 00:06:10,570 passons les articles dans l'article de commande et donc maintenant nous pouvons également le produire là-bas. 72 00:06:10,570 --> 00:06:17,720 Alors maintenant, si vous essayez à nouveau et que nous passons une nouvelle commande ici et que nous regardons simplement cela, maintenant cela 73 00:06:17,740 --> 00:06:22,540 fonctionne, nous avons un problème avec la clé ici que nous corrigerons dans une seconde. 74 00:06:22,540 --> 00:06:27,020 Essayons d'abord cela également sur Android, cliquez sur commander maintenant, puis passez aux commandes, montrez les détails, 75 00:06:27,310 --> 00:06:33,220 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 76 00:06:33,220 --> 00:06:40,410 un peu plus larges c'est aussi quelque chose que je veux corriger. Donc, pour corriger ces erreurs que nous avons, l'avertissement 77 00:06:40,410 --> 00:06:41,430 vient du 78 00:06:41,430 --> 00:06:48,840 fait qu'ici je mappe mes données dans les composants React et si nous le faisons manuellement avec la carte 79 00:06:48,840 --> 00:06:55,230 ici, nous devons attribuer cet accessoire clé, c'est une exigence fondamentale de React que vous j'aurai 80 00:06:55,230 --> 00:06:57,840 aussi dans React pour le web. 81 00:06:57,840 --> 00:07:05,100 Donc, ici, vous devez pointer vers un identifiant unique et chaque article du panier ici à la fin a un ID de produit 82 00:07:05,100 --> 00:07:10,950 que nous pouvons utiliser et vous pouvez le confirmer dans l'écran du panier où vous créez ce 83 00:07:10,950 --> 00:07:12,030 tableau d'articles du 84 00:07:12,030 --> 00:07:18,350 panier à la fin, là nous stockons cet ID de produit et qui sera unique par ligne, donc ça va. 85 00:07:18,390 --> 00:07:28,740 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 86 00:07:28,740 --> 00:07:30,400 et ici, assurez-vous 87 00:07:30,470 --> 00:07:35,370 simplement que nous définissons une largeur de 100% afin que nous prenions 88 00:07:35,580 --> 00:07:43,820 la pleine largeur disponible pour le articles du panier. Et maintenant, si nous essayons à nouveau et que nous commandons cela, puis nous allons 89 00:07:43,880 --> 00:07:45,450 sur notre écran de commandes et 90 00:07:45,470 --> 00:07:50,630 montrons les détails, maintenant cela ressemble à cela et maintenant nous pouvons afficher les détails et les masquer, une petite 91 00:07:50,630 --> 00:07:52,840 amélioration est peut-être que cela le texte doit 92 00:07:52,880 --> 00:07:57,800 être mis à jour, donc lorsque nous regardons les détails, cela devrait dire masquer les détails et ne pas 93 00:07:57,800 --> 00:08:02,950 afficher les détails et bien sûr, c'est aussi facile à mettre en œuvre dans les éléments de commande, nous avons 94 00:08:03,020 --> 00:08:09,230 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 95 00:08:09,230 --> 00:08:10,610 interne ici sont vrais. 96 00:08:10,610 --> 00:08:19,620 Si c'est le cas, alors ici, je veux dire cacher les détails, sinon je dirai montrer les détails et maintenant ce 97 00:08:19,620 --> 00:08:25,010 texte devrait changer dynamiquement lorsque nous montrons ou cachons nos détails. 98 00:08:25,070 --> 00:08:28,400 Donc, si nous commandons celui-ci la dernière fois ici, nous y jetons un 99 00:08:28,400 --> 00:08:31,170 coup d'œil, maintenant c'est afficher les détails, maintenant c'est cacher 100 00:08:31,280 --> 00:08:34,700 les détails, alors maintenant cela fonctionne vraiment de la manière dont cela devrait fonctionner. 101 00:08:34,710 --> 00:08:41,630 Maintenant, passons également une autre commande, juste pour confirmer que cela fonctionne vraiment. Si nous commandons ceci ici, nous allons à 102 00:08:41,630 --> 00:08:48,000 l'écran des commandes, maintenant vous voyez également cette deuxième commande et vous pouvez les contrôler indépendamment. 103 00:08:48,080 --> 00:08:53,540 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.