Durch Drücken der Detailschaltfläche hier in den Bestellartikeln sollten alle Artikel angezeigt werden, die wir haben. Dazu
möchte ich den Warenkorbartikel hier verwenden.
Eine Möglichkeit, dies zu tun, besteht darin, einen internen Status hier mithilfe des Hooks use use zu behandeln, den wir aus React
importieren, um zu steuern, ob wir derzeit die Details anzeigen oder nicht. Also werde ich diese Showdetails benennen und Showdetails
hier setzen und dies mit dem
Verwendungsstatus auf false initialisieren, damit wir die Details anfangs nicht anzeigen und jetzt, wenn
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
den Wert im Grunde invertieren. Dazu verwenden wir die spezielle Syntax, bei der wir hier eine
Funktion an diese Statuseinstellungsfunktion übergeben, wo wir den vorherigen Status erhalten und dann einen neuen Status zurückgeben Basierend auf diesem vorherigen Status und
hier, denken Sie daran, dass der
vorherige Status tatsächlich falsch oder wahr ist, je nachdem, welche Showdetails waren. Daher werde ich hier nicht
den vorherigen Status zurückgeben, um dies zu konvertieren. Wenn er falsch war, werde ich true als neuen zurückgeben
state, wenn es wahr ist, gebe ich false als neuen Status zurück und setze dies, um Details anzuzeigen.
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
dies nun unsere React-Syntax ist, die wir hier verwenden können. Wenn dies
wahr ist, geben wir diese Ansicht hier zurück. Könnte auf den ersten Blick seltsam aussehen, aber damit sagen wir,
ob dies wahr ist und dies wahr ist, und dies ist eine Abkürzung für Javascript, um zu überprüfen, ob dies
wahr ist. Nun, das ist immer wahr, weil dies letztendlich ein Objekt ist Dies wird
dann gerendert, so funktioniert Javascript.
Die Alternative wäre ein ternärer Ausdruck oder eine Variable, die Sie hier einrichten und die Sie mit
einer if-Prüfung ändern und dort unten ausgeben.
Daher verwende ich diesen Inline-Ausdruck hier, wo ich diese Ansicht ausgebe, wenn show details true
ist, und in dieser Ansicht möchte ich alle Elemente ausgeben.
In dieser Ansicht habe ich also eine dynamische Ausgabe, in der ich alle meine Artikel
durchlaufe, die ich voraussichtlich auf der Artikelstütze dieser Bestellartikelkomponente
erhalten werde, und dort können wir unsere Daten in eine Liste von jsx-Elementen abbilden, in eine Liste der Komponenten.
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
diese Funktion sozusagen für jeden Warenkorbartikel aus und gibt uns den Warenkorbartikel, den es gerade sucht und
Jetzt müssen wir für diesen Artikel ein neues jsx-Element zurückgeben, das wir ausgeben möchten, und dort
verwende ich meinen Warenkorbartikel, um das auszugeben.
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,
die Menge und den Titel als Eingabe genommen und er wollte auch die Menge.
Außerdem hatten wir dort die Schaltfläche "Löschen", die ich nicht für die Bestellposition haben möchte. Wir
müssen also
etwas dagegen tun, aber konzentrieren wir uns im Moment auf Menge, Titel und Menge und geben diese Daten weiter.
Hier ist also die Menge cartItem. Menge, Menge ist cartItem.
und denken Sie jetzt daran, dass alles, was wir hier in Bestellungen, in Artikeln speichern, am Ende das ist, was wir hier
in unserem Bestellungsreduzierer als Artikel
erhalten, also was wir in unserer Aktion erhalten. Also bekommen wir unsere Warenkorbartikel dort und
wenn wir uns den Warenkorbbildschirm ansehen und sehen, was wir dort übergeben, übergeben wir zum Hinzufügen einer Bestellung diese Warenkorbartikel konstant, die
dieses Array enthalten, das wir hier am Ende generieren .
Am Ende haben wir also eine Reihe solcher Objekte, also haben
wir den Produkttitel, den Produktpreis, die Menge und die Summe darin und damit können wir jetzt hier arbeiten, um den
Artikel zu bestellen, in dem ich meinen Warenkorb erstelle Artikel gebe ich im cartItem weiter. Menge, für die Menge gebe
ich in cartItem. Summe und nicht zuletzt im
Warenkorbartikel benötigen wir auch den Titel, damit CartItem. productTitle was ich hier gebe.
Das verbleibende Problem ist, wie gesagt, dass ein Warenkorbartikel dieses berührbare Symbol hat, um ihn zu löschen.
Dies ist nur dann sinnvoll, wenn wir diese Komponente in einem Warenkorb
verwenden, nicht, wenn wir sie in einer Bestellung verwenden, die wir ausgeben möchten natürlich schreibgeschützt.
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,
und nur wenn dies wahr ist, dieselbe Verknüpfung wie vor
einer Sekunde, geben wir diese berührbare Deckkraft aus, also dieses Symbol
im Allgemeinen.
sonst tun wir es nicht.
Jetzt haben wir diese löschbare Requisite im Warenkorb, die eingestellt werden muss, um das Papierkorbsymbol anzuzeigen.
Dies bedeutet, dass wir auf dem Warenkorbbildschirm, auf dem das Papierkorbsymbol angezeigt werden soll, wenn wir das Warenkorbelement
dort verwenden, löschbar festlegen müssen und es so einstellen muss. Dies setzt es
auf true und wir zeigen es an. Auf der anderen Seite habe ich in unserem
Bestellartikel, in dem ich auch den Warenkorbartikel verwende, dort nicht löschbar gesetzt und daher wird
dieses Papierkorbsymbol nicht gerendert. Schauen wir uns das
an, speichern wir es und legen diese Artikel in den Warenkorb,
drücken Sie auf Bestellung und gehen Sie dann zu den Bestellungen, klicken Sie auf Details anzeigen und ich erhalte eine Fehlermeldung.
Die Karte der Requisitenartikel kann nicht aufgerufen werden, da undefiniert ist kein Objekt.
Ein Grund dafür ist, dass ich versuche, alle meine Artikel hier auf dem Bestellartikel zu durchlaufen,
aber auf dem Bestellbildschirm stelle ich hier nie die Artikelstütze ein.
Auf dem Bestellbildschirm für die Bestellposition müssen wir also neben der Übergabe von Betrag und Datum
auch die Artikel für die von uns ausgegebene Bestellposition übergeben, die natürlich von unseren itemData empfangen oder
abgerufen werden können. Artikel, bei dem es sich um
eine Einzelbestellung handelt. Wenn wir uns nun das Bestellmodell ansehen, haben wir hier diese Artikeleigenschaft. So können wir
zugreifen. Artikel hier und jetzt
übergeben wir die Artikel an den Bestellartikel und können ihn daher jetzt auch dort ausgeben.
Wenn Sie es also noch einmal versuchen und wir hier eine neue Bestellung aufgeben und uns das einfach ansehen, jetzt funktioniert dies, wir
haben ein Problem mit dem Schlüssel hier, das wir in einer Sekunde beheben werden.
Lassen Sie uns dies zunächst auch auf Android versuchen, auf Jetzt bestellen klicken, dann zu
Bestellungen gehen, die Details anzeigen, die gleiche Warnung erhalten, aber ich habe geschrieben, dass es im Allgemeinen funktioniert, obwohl es schön
wäre, wenn diese Bestellpositionen etwas breiter wären Das möchte ich auch beheben. Um diese Fehler zu beheben, ergibt sich die
Warnung aus
der Tatsache, dass ich hier meine Daten in React-Komponenten abbilde. Wenn wir dies manuell mit Map hier tun,
müssen wir diese Schlüsselstütze zuweisen, das ist eine Kernanforderung von React, die Sie Ich werde
auch in React for Web haben.
Hier müssen Sie also auf eine eindeutige Kennung verweisen, und jeder Warenkorbartikel hier am Ende hat eine Produkt-ID, die wir verwenden
können. Sie können dies auf dem Warenkorbbildschirm bestätigen, auf dem Sie am Ende das Array von
Warenkorbartikeln erstellen,
das wir dort speichern Diese Produkt-ID und diese wird pro Zeile eindeutig sein, das ist also in Ordnung.
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
Sie hier einfach
sicher, dass wir eine Breite von 100% festlegen, damit wir
die volle verfügbare Breite für die verwenden Warenkorbartikel. Und jetzt, wenn wir es noch einmal versuchen und dies bestellen und dann zu
unserem Bestellbildschirm gehen und die
Details anzeigen, sieht es jetzt so aus, wie es aussehen sollte, und jetzt können wir die Details anzeigen
und verbergen, vielleicht ist dies eine winzige
Verbesserung Der Text sollte aktualisiert werden. Wenn wir also die Details anzeigen, sollte dies bedeuten, dass
Details ausgeblendet und keine Details angezeigt werden. Dies ist natürlich auch einfach in Auftragselementen zu implementieren. Dort haben
wir diese Schaltfläche. Wir müssen diesen Text nur dynamisch festlegen und prüfen, ob er angezeigt wird Details, die hier unser innerer
Zustand sind, sind wahr.
Wenn dies der Fall ist, möchte ich hier Details ausblenden sagen, andernfalls sage ich Details anzeigen, und jetzt sollte
dieser Text dynamisch wechseln, wenn wir unsere Details ein- oder ausblenden.
Wenn wir dies also ein letztes Mal hier bestellen, sehen wir
uns das an. Jetzt werden Details angezeigt, jetzt
werden Details ausgeblendet. Jetzt funktioniert dies wirklich so, wie es funktionieren sollte.
Lassen Sie uns jetzt auch eine weitere Bestellung aufgeben, um zu bestätigen, dass dies wirklich funktioniert. Wenn wir dies hier bestellen, gehen wir
zum Bestellbildschirm. Jetzt sehen Sie auch diese zweite Bestellung und können sie unabhängig steuern.
Dies ist also der Bestellbildschirm und wie wir dort Bestellungen ausgeben und wie wir den Warenkorbartikel hier sogar wiederverwenden können.