1 00:00:02,060 --> 00:00:06,950 Durch Drücken der Detailschaltfläche hier in den Bestellartikeln sollten alle Artikel angezeigt werden, die wir haben. Dazu 2 00:00:06,950 --> 00:00:08,810 möchte ich den Warenkorbartikel hier verwenden. 3 00:00:08,840 --> 00:00:14,150 Eine Möglichkeit, dies zu tun, besteht darin, einen internen Status hier mithilfe des Hooks use use zu behandeln, den wir aus React 4 00:00:14,150 --> 00:00:20,000 importieren, um zu steuern, ob wir derzeit die Details anzeigen oder nicht. Also werde ich diese Showdetails benennen und Showdetails 5 00:00:20,120 --> 00:00:22,730 hier setzen und dies mit dem 6 00:00:24,300 --> 00:00:29,680 Verwendungsstatus auf false initialisieren, damit wir die Details anfangs nicht anzeigen und jetzt, wenn 7 00:00:30,000 --> 00:00:38,190 wir diese Schaltfläche hier drücken, möchte ich diesen Status natürlich ändern. In dieser Funktion werde ich also set show details aufrufen und 8 00:00:38,200 --> 00:00:43,690 den Wert im Grunde invertieren. Dazu verwenden wir die spezielle Syntax, bei der wir hier eine 9 00:00:43,690 --> 00:00:51,370 Funktion an diese Statuseinstellungsfunktion übergeben, wo wir den vorherigen Status erhalten und dann einen neuen Status zurückgeben Basierend auf diesem vorherigen Status und 10 00:00:51,370 --> 00:00:53,610 hier, denken Sie daran, dass der 11 00:00:53,680 --> 00:00:59,290 vorherige Status tatsächlich falsch oder wahr ist, je nachdem, welche Showdetails waren. Daher werde ich hier nicht 12 00:00:59,290 --> 00:01:05,320 den vorherigen Status zurückgeben, um dies zu konvertieren. Wenn er falsch war, werde ich true als neuen zurückgeben 13 00:01:05,320 --> 00:01:11,200 state, wenn es wahr ist, gebe ich false als neuen Status zurück und setze dies, um Details anzuzeigen. 14 00:01:11,200 --> 00:01:18,130 Jetzt können wir diese Informationen hier verwenden, um einige Inhalte bedingt auszugeben. Wir können Showdetails überprüfen und wenn dies wahr ist und 15 00:01:18,730 --> 00:01:22,930 dies nun unsere React-Syntax ist, die wir hier verwenden können. Wenn dies 16 00:01:22,930 --> 00:01:29,200 wahr ist, geben wir diese Ansicht hier zurück. Könnte auf den ersten Blick seltsam aussehen, aber damit sagen wir, 17 00:01:29,200 --> 00:01:34,340 ob dies wahr ist und dies wahr ist, und dies ist eine Abkürzung für Javascript, um zu überprüfen, ob dies 18 00:01:34,480 --> 00:01:38,380 wahr ist. Nun, das ist immer wahr, weil dies letztendlich ein Objekt ist Dies wird 19 00:01:38,380 --> 00:01:39,830 dann gerendert, so funktioniert Javascript. 20 00:01:39,850 --> 00:01:45,430 Die Alternative wäre ein ternärer Ausdruck oder eine Variable, die Sie hier einrichten und die Sie mit 21 00:01:45,430 --> 00:01:47,920 einer if-Prüfung ändern und dort unten ausgeben. 22 00:01:47,920 --> 00:01:53,500 Daher verwende ich diesen Inline-Ausdruck hier, wo ich diese Ansicht ausgebe, wenn show details true 23 00:01:53,560 --> 00:01:57,400 ist, und in dieser Ansicht möchte ich alle Elemente ausgeben. 24 00:01:57,490 --> 00:02:02,650 In dieser Ansicht habe ich also eine dynamische Ausgabe, in der ich alle meine Artikel 25 00:02:02,650 --> 00:02:05,920 durchlaufe, die ich voraussichtlich auf der Artikelstütze dieser Bestellartikelkomponente 26 00:02:05,920 --> 00:02:12,400 erhalten werde, und dort können wir unsere Daten in eine Liste von jsx-Elementen abbilden, in eine Liste der Komponenten. 27 00:02:13,150 --> 00:02:21,640 Hier bekomme ich natürlich am Ende meinen Warenkorbartikel, da Artikel in einer Bestellung nur die Artikel sind, die wir im Warenkorb hatten. Map führt 28 00:02:21,640 --> 00:02:27,610 diese Funktion sozusagen für jeden Warenkorbartikel aus und gibt uns den Warenkorbartikel, den es gerade sucht und 29 00:02:27,610 --> 00:02:33,190 Jetzt müssen wir für diesen Artikel ein neues jsx-Element zurückgeben, das wir ausgeben möchten, und dort 30 00:02:33,190 --> 00:02:35,810 verwende ich meinen Warenkorbartikel, um das auszugeben. 31 00:02:35,860 --> 00:02:45,490 Hier gebe ich also einen Warenkorbartikel aus, nicht einen Warenkorb, sondern einen Warenkorbartikel wie diesen. Nun hat der Warenkorbartikel, wenn Sie einen Blick darauf werfen, 32 00:02:45,530 --> 00:02:51,920 die Menge und den Titel als Eingabe genommen und er wollte auch die Menge. 33 00:02:51,920 --> 00:02:57,050 Außerdem hatten wir dort die Schaltfläche "Löschen", die ich nicht für die Bestellposition haben möchte. Wir 34 00:02:57,050 --> 00:02:57,970 müssen also 35 00:02:58,250 --> 00:03:04,610 etwas dagegen tun, aber konzentrieren wir uns im Moment auf Menge, Titel und Menge und geben diese Daten weiter. 36 00:03:04,610 --> 00:03:13,810 Hier ist also die Menge cartItem. Menge, Menge ist cartItem. 37 00:03:13,820 --> 00:03:20,810 und denken Sie jetzt daran, dass alles, was wir hier in Bestellungen, in Artikeln speichern, am Ende das ist, was wir hier 38 00:03:20,810 --> 00:03:22,550 in unserem Bestellungsreduzierer als Artikel 39 00:03:22,550 --> 00:03:27,430 erhalten, also was wir in unserer Aktion erhalten. Also bekommen wir unsere Warenkorbartikel dort und 40 00:03:27,430 --> 00:03:33,950 wenn wir uns den Warenkorbbildschirm ansehen und sehen, was wir dort übergeben, übergeben wir zum Hinzufügen einer Bestellung diese Warenkorbartikel konstant, die 41 00:03:33,950 --> 00:03:36,970 dieses Array enthalten, das wir hier am Ende generieren . 42 00:03:37,010 --> 00:03:39,970 Am Ende haben wir also eine Reihe solcher Objekte, also haben 43 00:03:40,010 --> 00:03:45,110 wir den Produkttitel, den Produktpreis, die Menge und die Summe darin und damit können wir jetzt hier arbeiten, um den 44 00:03:45,110 --> 00:03:52,970 Artikel zu bestellen, in dem ich meinen Warenkorb erstelle Artikel gebe ich im cartItem weiter. Menge, für die Menge gebe 45 00:03:52,970 --> 00:03:59,850 ich in cartItem. Summe und nicht zuletzt im 46 00:03:59,860 --> 00:04:08,810 Warenkorbartikel benötigen wir auch den Titel, damit CartItem. productTitle was ich hier gebe. 47 00:04:10,420 --> 00:04:16,130 Das verbleibende Problem ist, wie gesagt, dass ein Warenkorbartikel dieses berührbare Symbol hat, um ihn zu löschen. 48 00:04:16,130 --> 00:04:20,680 Dies ist nur dann sinnvoll, wenn wir diese Komponente in einem Warenkorb 49 00:04:20,690 --> 00:04:25,890 verwenden, nicht, wenn wir sie in einer Bestellung verwenden, die wir ausgeben möchten natürlich schreibgeschützt. 50 00:04:26,030 --> 00:04:34,430 Die Lösung ist also, dass wir dies hier im Warenkorb einpacken und einfach erwarten, eine Requisite zu erhalten, die zum Beispiel löschbar sagt, 51 00:04:34,430 --> 00:04:37,990 und nur wenn dies wahr ist, dieselbe Verknüpfung wie vor 52 00:04:38,000 --> 00:04:41,780 einer Sekunde, geben wir diese berührbare Deckkraft aus, also dieses Symbol 53 00:04:41,810 --> 00:04:43,130 im Allgemeinen. 54 00:04:43,220 --> 00:04:45,060 sonst tun wir es nicht. 55 00:04:45,080 --> 00:04:51,150 Jetzt haben wir diese löschbare Requisite im Warenkorb, die eingestellt werden muss, um das Papierkorbsymbol anzuzeigen. 56 00:04:51,170 --> 00:04:57,260 Dies bedeutet, dass wir auf dem Warenkorbbildschirm, auf dem das Papierkorbsymbol angezeigt werden soll, wenn wir das Warenkorbelement 57 00:04:57,620 --> 00:05:01,790 dort verwenden, löschbar festlegen müssen und es so einstellen muss. Dies setzt es 58 00:05:01,790 --> 00:05:07,280 auf true und wir zeigen es an. Auf der anderen Seite habe ich in unserem 59 00:05:07,430 --> 00:05:12,830 Bestellartikel, in dem ich auch den Warenkorbartikel verwende, dort nicht löschbar gesetzt und daher wird 60 00:05:12,830 --> 00:05:16,530 dieses Papierkorbsymbol nicht gerendert. Schauen wir uns das 61 00:05:16,530 --> 00:05:20,550 an, speichern wir es und legen diese Artikel in den Warenkorb, 62 00:05:20,550 --> 00:05:27,760 drücken Sie auf Bestellung und gehen Sie dann zu den Bestellungen, klicken Sie auf Details anzeigen und ich erhalte eine Fehlermeldung. 63 00:05:27,780 --> 00:05:32,310 Die Karte der Requisitenartikel kann nicht aufgerufen werden, da undefiniert ist kein Objekt. 64 00:05:32,500 --> 00:05:37,800 Ein Grund dafür ist, dass ich versuche, alle meine Artikel hier auf dem Bestellartikel zu durchlaufen, 65 00:05:37,860 --> 00:05:41,640 aber auf dem Bestellbildschirm stelle ich hier nie die Artikelstütze ein. 66 00:05:41,640 --> 00:05:47,280 Auf dem Bestellbildschirm für die Bestellposition müssen wir also neben der Übergabe von Betrag und Datum 67 00:05:47,280 --> 00:05:53,460 auch die Artikel für die von uns ausgegebene Bestellposition übergeben, die natürlich von unseren itemData empfangen oder 68 00:05:53,550 --> 00:05:56,350 abgerufen werden können. Artikel, bei dem es sich um 69 00:05:56,350 --> 00:06:03,030 eine Einzelbestellung handelt. Wenn wir uns nun das Bestellmodell ansehen, haben wir hier diese Artikeleigenschaft. So können wir 70 00:06:03,030 --> 00:06:05,930 zugreifen. Artikel hier und jetzt 71 00:06:06,040 --> 00:06:10,570 übergeben wir die Artikel an den Bestellartikel und können ihn daher jetzt auch dort ausgeben. 72 00:06:10,570 --> 00:06:17,720 Wenn Sie es also noch einmal versuchen und wir hier eine neue Bestellung aufgeben und uns das einfach ansehen, jetzt funktioniert dies, wir 73 00:06:17,740 --> 00:06:22,540 haben ein Problem mit dem Schlüssel hier, das wir in einer Sekunde beheben werden. 74 00:06:22,540 --> 00:06:27,020 Lassen Sie uns dies zunächst auch auf Android versuchen, auf Jetzt bestellen klicken, dann zu 75 00:06:27,310 --> 00:06:33,220 Bestellungen gehen, die Details anzeigen, die gleiche Warnung erhalten, aber ich habe geschrieben, dass es im Allgemeinen funktioniert, obwohl es schön 76 00:06:33,220 --> 00:06:40,410 wäre, wenn diese Bestellpositionen etwas breiter wären Das möchte ich auch beheben. Um diese Fehler zu beheben, ergibt sich die 77 00:06:40,410 --> 00:06:41,430 Warnung aus 78 00:06:41,430 --> 00:06:48,840 der Tatsache, dass ich hier meine Daten in React-Komponenten abbilde. Wenn wir dies manuell mit Map hier tun, 79 00:06:48,840 --> 00:06:55,230 müssen wir diese Schlüsselstütze zuweisen, das ist eine Kernanforderung von React, die Sie Ich werde 80 00:06:55,230 --> 00:06:57,840 auch in React for Web haben. 81 00:06:57,840 --> 00:07:05,100 Hier müssen Sie also auf eine eindeutige Kennung verweisen, und jeder Warenkorbartikel hier am Ende hat eine Produkt-ID, die wir verwenden 82 00:07:05,100 --> 00:07:10,950 können. Sie können dies auf dem Warenkorbbildschirm bestätigen, auf dem Sie am Ende das Array von 83 00:07:10,950 --> 00:07:12,030 Warenkorbartikeln erstellen, 84 00:07:12,030 --> 00:07:18,350 das wir dort speichern Diese Produkt-ID und diese wird pro Zeile eindeutig sein, das ist also in Ordnung. 85 00:07:18,390 --> 00:07:28,740 In Bezug auf die Breite können wir hier einen Stil hinzufügen, beispielsweise Elemente detaillieren und diesen dort unten im Stylesheet hinzufügen. Stellen 86 00:07:28,740 --> 00:07:30,400 Sie hier einfach 87 00:07:30,470 --> 00:07:35,370 sicher, dass wir eine Breite von 100% festlegen, damit wir 88 00:07:35,580 --> 00:07:43,820 die volle verfügbare Breite für die verwenden Warenkorbartikel. Und jetzt, wenn wir es noch einmal versuchen und dies bestellen und dann zu 89 00:07:43,880 --> 00:07:45,450 unserem Bestellbildschirm gehen und die 90 00:07:45,470 --> 00:07:50,630 Details anzeigen, sieht es jetzt so aus, wie es aussehen sollte, und jetzt können wir die Details anzeigen 91 00:07:50,630 --> 00:07:52,840 und verbergen, vielleicht ist dies eine winzige 92 00:07:52,880 --> 00:07:57,800 Verbesserung Der Text sollte aktualisiert werden. Wenn wir also die Details anzeigen, sollte dies bedeuten, dass 93 00:07:57,800 --> 00:08:02,950 Details ausgeblendet und keine Details angezeigt werden. Dies ist natürlich auch einfach in Auftragselementen zu implementieren. Dort haben 94 00:08:03,020 --> 00:08:09,230 wir diese Schaltfläche. Wir müssen diesen Text nur dynamisch festlegen und prüfen, ob er angezeigt wird Details, die hier unser innerer 95 00:08:09,230 --> 00:08:10,610 Zustand sind, sind wahr. 96 00:08:10,610 --> 00:08:19,620 Wenn dies der Fall ist, möchte ich hier Details ausblenden sagen, andernfalls sage ich Details anzeigen, und jetzt sollte 97 00:08:19,620 --> 00:08:25,010 dieser Text dynamisch wechseln, wenn wir unsere Details ein- oder ausblenden. 98 00:08:25,070 --> 00:08:28,400 Wenn wir dies also ein letztes Mal hier bestellen, sehen wir 99 00:08:28,400 --> 00:08:31,170 uns das an. Jetzt werden Details angezeigt, jetzt 100 00:08:31,280 --> 00:08:34,700 werden Details ausgeblendet. Jetzt funktioniert dies wirklich so, wie es funktionieren sollte. 101 00:08:34,710 --> 00:08:41,630 Lassen Sie uns jetzt auch eine weitere Bestellung aufgeben, um zu bestätigen, dass dies wirklich funktioniert. Wenn wir dies hier bestellen, gehen wir 102 00:08:41,630 --> 00:08:48,000 zum Bestellbildschirm. Jetzt sehen Sie auch diese zweite Bestellung und können sie unabhängig steuern. 103 00:08:48,080 --> 00:08:53,540 Dies ist also der Bestellbildschirm und wie wir dort Bestellungen ausgeben und wie wir den Warenkorbartikel hier sogar wiederverwenden können.