Naciśnięcie przycisku szczegółów tutaj w zamówieniu powinno ujawnić wszystkie przedmioty, które mamy, i do
tego chcę użyć tutaj koszyka.
Jednym ze sposobów, aby to zrobić, jest obsłużenie tutaj jakiegoś stanu wewnętrznego za pomocą haka stanu użycia, który importujemy
z React, gdzie kontrolujemy, czy obecnie wyświetlamy szczegóły, czy nie. Dlatego nadaję nazwę tym szczegółom i ustawię
je tutaj i zainicjuję to
stanem użycia, aby było fałszywe, abyśmy nie pokazywali szczegółów na początku, a teraz,
kiedy naciśniemy ten przycisk tutaj, oczywiście chcę zmienić ten stan. Więc w tej funkcji wywołam set show details i w
zasadzie odwracam wartość, w tym celu używamy specjalnej składni, w której przekazujemy funkcję
do funkcji ustawiania stanu tutaj, gdzie uzyskujemy poprzedni stan, a następnie zwracamy nowy stan w oparciu o ten poprzedni stan
i tutaj, pamiętaj, że poprzedni
stan jest rzeczywiście fałszywy lub prawdziwy w zależności od tego, co pokazały szczegóły, więc
tutaj wrócę nie do poprzedniego stanu, aby to przekonwertować, jeśli był fałszywy, zwrócę prawdę jako nowy
stan, jeśli to prawda, zwrócę false jako nowy stan i ustawię to, aby wyświetlać szczegóły.
Teraz możemy wykorzystać te informacje tutaj do warunkowego wyświetlania niektórych treści. Możemy sprawdzić szczegóły pokazu, a jeśli to prawda, a
to jest teraz nasza składnia React, której możemy użyć tutaj, więc
jeśli to prawda, to zwracamy ten widok tutaj. Na początku może wyglądać dziwnie, ale z tym mówimy, czy
to prawda, a to prawda, i jest to skrót do Javascript, aby sprawdzić, czy to prawda, no
cóż, to zawsze prawda, ponieważ jest to obiekt na końcu, więc zostanie to
zrenderowane, tak działa Javascript.
Alternatywą byłoby wyrażenie trójskładnikowe lub zmienna, którą ustawiłeś tutaj, którą zmieniasz za pomocą if
check, a następnie wyprowadzasz na dół.
Więc użyję tego wyrażenia wbudowanego tutaj, gdzie wypisuję ten widok, jeśli szczegóły show są
prawdziwe, aw tym widoku chcę wypisać wszystkie elementy.
Więc w tym widoku będę miał dynamiczny wynik, w którym przejrzę wszystkie moje
przedmioty, które spodziewam się uzyskać na podporze
przedmiotów tego elementu zamówienia i tam możemy zamapować nasze dane na listę elementów jsx, na lista komponentów.
Więc tutaj oczywiście dostaję mój koszyk, ponieważ elementy w zamówieniu są tylko przedmiotami, które mieliśmy w koszyku, więc mapa wykonuje tę funkcję
na każdym koszyku, aby powiedzieć, i daje nam ten koszyk, którego aktualnie szuka i teraz dla
tego elementu musimy zwrócić nowy element jsx, który chcemy wygenerować i tam właśnie używam
mojego elementu koszyka, aby go wygenerować.
Więc tutaj wyprowadzam przedmiot koszyka, nie koszyk, ale koszyk taki jak ten. Teraz element koszyka, jeśli masz spojrzenie, wziął
ilość i tytuł jako dane wejściowe, a także chciał kwotę.
Ponadto mieliśmy tam przycisk usuwania, którego nie chcę na elemencie zamówienia, więc
musimy coś
z tym zrobić, ale skupmy się teraz na ilości, tytule i ilości i przekażmy te dane.
Więc tutaj ilość to cartItem. ilość, ilość to cartItem.
a teraz pamiętajmy, że cokolwiek przechowujemy tutaj w zamówieniach, w przedmiotach jest w końcu tym, co otrzymujemy jako przedmioty
w naszym reduktorze zamówień,
więc to, co otrzymujemy w naszej akcji. Dostajemy więc nasze przedmioty z koszyka
i jeśli spojrzymy na ekran koszyka i zobaczymy, co tam przekazujemy, to w celu dodania zamówienia przekazujemy stałą
zawartość koszyka, która utrzymuje tablicę, którą generujemy tutaj .
W końcu mamy tam szereg takich obiektów, więc
mamy tytuł produktu, cenę produktu, ilość i sumę, i właśnie z tym możemy teraz pracować
tutaj, aby stworzyć przedmiot, w którym tworzę koszyk przedmioty, przekazuję w koszyku. ilość, za kwotę, którą
przekazuję w koszyku. suma i ostatni, ale nie mniej ważny
element w koszyku, potrzebujemy również tytułu, aby był to cartItem. produkt Nazwij to, co tu przekazuję.
Pozostającym problemem, jak już powiedziałem, jest to, że element koszyka ma tutaj tę dotykalną ikonę, aby
go usunąć, ma to sens tylko wtedy, gdy używamy tego elementu wewnątrz
koszyka, a nie kiedy używamy go wewnątrz zamówienia, które chcemy wydrukować oczywiście tylko do odczytu.
Tak więc rozwiązaniem jest to, że tutaj, w koszyku, zawijamy to i po prostu oczekujemy, że dostaniemy rekwizyt, który mówi na przykład, że
można go usunąć i tylko jeśli to prawda, ten sam
skrót jak przed chwilą, wyświetlamy tę dotykalną nieprzezroczystość, więc ta
ikona ogólnie,
w przeciwnym razie my nie.
Teraz mamy ten usuwalny rekwizyt w elemencie koszyka, który należy ustawić, aby wyświetlał tę ikonę kosza.
Oznacza to, że na ekranie koszyka, gdzie chcemy mieć tę ikonę kosza, kiedy używamy tam elementu koszyka,
musimy ustawić możliwość usunięcia i ustawienie w ten sposób wystarcza, to
ustawi się na prawdę i pokażemy to. Z drugiej strony w naszym zamówieniu,
w którym również korzystam z koszyka, nie ustawiam opcji usuwania i dlatego nie
wyrenderujemy tej ikony kosza. Spójrzmy więc na
to, zapiszmy to i dodajmy te elementy do
koszyka, naciśnij teraz zamówienie, a następnie przejdź do zamówień, kliknij pokaż szczegóły i otrzymuję błąd, mapy
elementów rekwizytów nie można wywołać, ponieważ niezdefiniowana jest nie przedmiot.
Powodem tego jest to, że próbuję przeglądać wszystkie moje przedmioty tutaj na zamówionym elemencie, ale
na ekranie zamówień nigdy nie ustawiam tutaj propozycji przedmiotów.
Więc na ekranie zamówień dla przedmiotu zamówienia, oprócz podania kwoty i daty, musimy również
przekazać elementy dla tego przedmiotu zamówienia, który wysyłamy, i który oczywiście można otrzymać lub uzyskać
z naszego itemData. przedmiot, który jest pojedynczym zamówieniem,
a teraz, jeśli przyjrzymy się modelowi zamówienia, tam będziemy mieli tę własność przedmiotów tutaj. Abyśmy mogli uzyskać
dostęp. przedmioty tutaj i teraz
przekazujemy przedmioty do przedmiotu zamówienia, a zatem teraz możemy je również tam wyprowadzić.
Więc jeśli spróbujesz jeszcze raz, a my złożymy tutaj nowe zamówienie i po prostu się temu przyjrzymy,
teraz to działa, mamy problem z kluczem, który naprawimy za chwilę.
Najpierw wypróbujmy to również na Androidzie, kliknij teraz zamówienie, a następnie przejdź do
zamówień, pokaż szczegóły, otrzymaj to samo ostrzeżenie, ale napisałem, że ogólnie działa, choć byłoby miło, gdyby te
pozycje zamówienia były nieco szersze więc to też chcę naprawić. Aby naprawić te błędy, które mamy, ostrzeżenie
wynika
z faktu, że tutaj mapuję moje dane na komponenty React i jeśli zrobimy to ręcznie z
mapą tutaj, musimy przypisać ten kluczowy rekwizyt, jest to podstawowy wymóg React, który
Będę również miał React dla sieci.
Więc tutaj musisz wskazać unikalny identyfikator, a każdy element koszyka tutaj na końcu ma identyfikator produktu, którego możemy
użyć, i możesz to potwierdzić na ekranie koszyka, gdzie na końcu tworzysz ten zestaw
elementów koszyka,
tam przechowujemy ten identyfikator produktu, który będzie unikatowy dla każdego wiersza, więc jest w porządku.
Teraz, jeśli chodzi o szerokość, możemy dodać styl tutaj, na przykład wyszczególnić elementy i dodać go tam w arkuszu stylów
i tutaj,
po prostu upewnij się, że ustawiliśmy szerokość 100%, abyśmy
wzięli pełną dostępną szerokość dla przedmioty w koszyku. A teraz, jeśli spróbujemy jeszcze raz i zamówimy to, a następnie przejdziemy
do ekranu naszych zamówień i
pokażemy szczegóły, teraz wygląda to tak, jak powinno wyglądać i teraz możemy zobaczyć szczegóły i
ukryć je, może drobną poprawą jest
to, że to tekst powinien się zaktualizować, więc kiedy przeglądamy szczegóły, powinno to oznaczać ukrywanie
szczegółów i nie pokazywanie szczegółów, i oczywiście jest to łatwe do zaimplementowania w elementach zamówienia,
mamy ten przycisk, musimy tylko ustawić ten tekst dynamicznie i sprawdzić, czy pokaż szczegóły, które są tutaj naszym stanem
wewnętrznym, są prawdziwe.
Jeśli tak jest, to tutaj chcę powiedzieć ukryj szczegóły, w przeciwnym razie powiem pokaż szczegóły, a teraz ten tekst
powinien się zmieniać dynamicznie, gdy pokażemy lub ukryjemy nasze dane.
Więc jeśli zamówimy to tutaj po raz ostatni, przyjrzymy
się temu, teraz pokazuje szczegóły, teraz ukrywa
szczegóły, więc teraz to naprawdę działa tak, jak powinno.
Teraz złóżmy także inne zamówienie, aby potwierdzić, że to naprawdę działa. Jeśli zamówimy to tutaj, przejdziemy do
ekranu zamówień, teraz zobaczysz również to drugie zamówienie i możesz je kontrolować niezależnie.
To jest ekran zamówienia i jak możemy tam wydawać zamówienia i jak możemy nawet ponownie użyć tutaj koszyka.