1
00:00:02,060 --> 00:00:06,950
Naciśnięcie przycisku szczegółów tutaj w zamówieniu powinno ujawnić wszystkie przedmioty, które mamy, i do

2
00:00:06,950 --> 00:00:08,810
tego chcę użyć tutaj koszyka.

3
00:00:08,840 --> 00:00:14,150
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

4
00:00:14,150 --> 00:00:20,000
z React, gdzie kontrolujemy, czy obecnie wyświetlamy szczegóły, czy nie. Dlatego nadaję nazwę tym szczegółom i ustawię

5
00:00:20,120 --> 00:00:22,730
je tutaj i zainicjuję to

6
00:00:24,300 --> 00:00:29,680
stanem użycia, aby było fałszywe, abyśmy nie pokazywali szczegółów na początku, a teraz,

7
00:00:30,000 --> 00:00:38,190
kiedy naciśniemy ten przycisk tutaj, oczywiście chcę zmienić ten stan. Więc w tej funkcji wywołam set show details i w

8
00:00:38,200 --> 00:00:43,690
zasadzie odwracam wartość, w tym celu używamy specjalnej składni, w której przekazujemy funkcję

9
00:00:43,690 --> 00:00:51,370
do funkcji ustawiania stanu tutaj, gdzie uzyskujemy poprzedni stan, a następnie zwracamy nowy stan w oparciu o ten poprzedni stan

10
00:00:51,370 --> 00:00:53,610
i tutaj, pamiętaj, że poprzedni

11
00:00:53,680 --> 00:00:59,290
stan jest rzeczywiście fałszywy lub prawdziwy w zależności od tego, co pokazały szczegóły, więc

12
00:00:59,290 --> 00:01:05,320
tutaj wrócę nie do poprzedniego stanu, aby to przekonwertować, jeśli był fałszywy, zwrócę prawdę jako nowy

13
00:01:05,320 --> 00:01:11,200
stan, jeśli to prawda, zwrócę false jako nowy stan i ustawię to, aby wyświetlać szczegóły.

14
00:01:11,200 --> 00:01:18,130
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

15
00:01:18,730 --> 00:01:22,930
to jest teraz nasza składnia React, której możemy użyć tutaj, więc

16
00:01:22,930 --> 00:01:29,200
jeśli to prawda, to zwracamy ten widok tutaj. Na początku może wyglądać dziwnie, ale z tym mówimy, czy

17
00:01:29,200 --> 00:01:34,340
to prawda, a to prawda, i jest to skrót do Javascript, aby sprawdzić, czy to prawda, no

18
00:01:34,480 --> 00:01:38,380
cóż, to zawsze prawda, ponieważ jest to obiekt na końcu, więc zostanie to

19
00:01:38,380 --> 00:01:39,830
zrenderowane, tak działa Javascript.

20
00:01:39,850 --> 00:01:45,430
Alternatywą byłoby wyrażenie trójskładnikowe lub zmienna, którą ustawiłeś tutaj, którą zmieniasz za pomocą if

21
00:01:45,430 --> 00:01:47,920
check, a następnie wyprowadzasz na dół.

22
00:01:47,920 --> 00:01:53,500
Więc użyję tego wyrażenia wbudowanego tutaj, gdzie wypisuję ten widok, jeśli szczegóły show są

23
00:01:53,560 --> 00:01:57,400
prawdziwe, aw tym widoku chcę wypisać wszystkie elementy.

24
00:01:57,490 --> 00:02:02,650
Więc w tym widoku będę miał dynamiczny wynik, w którym przejrzę wszystkie moje

25
00:02:02,650 --> 00:02:05,920
przedmioty, które spodziewam się uzyskać na podporze

26
00:02:05,920 --> 00:02:12,400
przedmiotów tego elementu zamówienia i tam możemy zamapować nasze dane na listę elementów jsx, na lista komponentów.

27
00:02:13,150 --> 00:02:21,640
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ę

28
00:02:21,640 --> 00:02:27,610
na każdym koszyku, aby powiedzieć, i daje nam ten koszyk, którego aktualnie szuka i teraz dla

29
00:02:27,610 --> 00:02:33,190
tego elementu musimy zwrócić nowy element jsx, który chcemy wygenerować i tam właśnie używam

30
00:02:33,190 --> 00:02:35,810
mojego elementu koszyka, aby go wygenerować.

31
00:02:35,860 --> 00:02:45,490
Więc tutaj wyprowadzam przedmiot koszyka, nie koszyk, ale koszyk taki jak ten. Teraz element koszyka, jeśli masz spojrzenie, wziął

32
00:02:45,530 --> 00:02:51,920
ilość i tytuł jako dane wejściowe, a także chciał kwotę.

33
00:02:51,920 --> 00:02:57,050
Ponadto mieliśmy tam przycisk usuwania, którego nie chcę na elemencie zamówienia, więc

34
00:02:57,050 --> 00:02:57,970
musimy coś

35
00:02:58,250 --> 00:03:04,610
z tym zrobić, ale skupmy się teraz na ilości, tytule i ilości i przekażmy te dane.

36
00:03:04,610 --> 00:03:13,810
Więc tutaj ilość to cartItem. ilość, ilość to cartItem.

37
00:03:13,820 --> 00:03:20,810
a teraz pamiętajmy, że cokolwiek przechowujemy tutaj w zamówieniach, w przedmiotach jest w końcu tym, co otrzymujemy jako przedmioty

38
00:03:20,810 --> 00:03:22,550
w naszym reduktorze zamówień,

39
00:03:22,550 --> 00:03:27,430
więc to, co otrzymujemy w naszej akcji. Dostajemy więc nasze przedmioty z koszyka

40
00:03:27,430 --> 00:03:33,950
i jeśli spojrzymy na ekran koszyka i zobaczymy, co tam przekazujemy, to w celu dodania zamówienia przekazujemy stałą

41
00:03:33,950 --> 00:03:36,970
zawartość koszyka, która utrzymuje tablicę, którą generujemy tutaj .

42
00:03:37,010 --> 00:03:39,970
W końcu mamy tam szereg takich obiektów, więc

43
00:03:40,010 --> 00:03:45,110
mamy tytuł produktu, cenę produktu, ilość i sumę, i właśnie z tym możemy teraz pracować

44
00:03:45,110 --> 00:03:52,970
tutaj, aby stworzyć przedmiot, w którym tworzę koszyk przedmioty, przekazuję w koszyku. ilość, za kwotę, którą

45
00:03:52,970 --> 00:03:59,850
przekazuję w koszyku. suma i ostatni, ale nie mniej ważny

46
00:03:59,860 --> 00:04:08,810
element w koszyku, potrzebujemy również tytułu, aby był to cartItem. produkt Nazwij to, co tu przekazuję.

47
00:04:10,420 --> 00:04:16,130
Pozostającym problemem, jak już powiedziałem, jest to, że element koszyka ma tutaj tę dotykalną ikonę, aby

48
00:04:16,130 --> 00:04:20,680
go usunąć, ma to sens tylko wtedy, gdy używamy tego elementu wewnątrz

49
00:04:20,690 --> 00:04:25,890
koszyka, a nie kiedy używamy go wewnątrz zamówienia, które chcemy wydrukować oczywiście tylko do odczytu.

50
00:04:26,030 --> 00:04:34,430
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

51
00:04:34,430 --> 00:04:37,990
można go usunąć i tylko jeśli to prawda, ten sam

52
00:04:38,000 --> 00:04:41,780
skrót jak przed chwilą, wyświetlamy tę dotykalną nieprzezroczystość, więc ta

53
00:04:41,810 --> 00:04:43,130
ikona ogólnie,

54
00:04:43,220 --> 00:04:45,060
w przeciwnym razie my nie.

55
00:04:45,080 --> 00:04:51,150
Teraz mamy ten usuwalny rekwizyt w elemencie koszyka, który należy ustawić, aby wyświetlał tę ikonę kosza.

56
00:04:51,170 --> 00:04:57,260
Oznacza to, że na ekranie koszyka, gdzie chcemy mieć tę ikonę kosza, kiedy używamy tam elementu koszyka,

57
00:04:57,620 --> 00:05:01,790
musimy ustawić możliwość usunięcia i ustawienie w ten sposób wystarcza, to

58
00:05:01,790 --> 00:05:07,280
ustawi się na prawdę i pokażemy to. Z drugiej strony w naszym zamówieniu,

59
00:05:07,430 --> 00:05:12,830
w którym również korzystam z koszyka, nie ustawiam opcji usuwania i dlatego nie

60
00:05:12,830 --> 00:05:16,530
wyrenderujemy tej ikony kosza. Spójrzmy więc na

61
00:05:16,530 --> 00:05:20,550
to, zapiszmy to i dodajmy te elementy do

62
00:05:20,550 --> 00:05:27,760
koszyka, naciśnij teraz zamówienie, a następnie przejdź do zamówień, kliknij pokaż szczegóły i otrzymuję błąd, mapy

63
00:05:27,780 --> 00:05:32,310
elementów rekwizytów nie można wywołać, ponieważ niezdefiniowana jest nie przedmiot.

64
00:05:32,500 --> 00:05:37,800
Powodem tego jest to, że próbuję przeglądać wszystkie moje przedmioty tutaj na zamówionym elemencie, ale

65
00:05:37,860 --> 00:05:41,640
na ekranie zamówień nigdy nie ustawiam tutaj propozycji przedmiotów.

66
00:05:41,640 --> 00:05:47,280
Więc na ekranie zamówień dla przedmiotu zamówienia, oprócz podania kwoty i daty, musimy również

67
00:05:47,280 --> 00:05:53,460
przekazać elementy dla tego przedmiotu zamówienia, który wysyłamy, i który oczywiście można otrzymać lub uzyskać

68
00:05:53,550 --> 00:05:56,350
z naszego itemData. przedmiot, który jest pojedynczym zamówieniem,

69
00:05:56,350 --> 00:06:03,030
a teraz, jeśli przyjrzymy się modelowi zamówienia, tam będziemy mieli tę własność przedmiotów tutaj. Abyśmy mogli uzyskać

70
00:06:03,030 --> 00:06:05,930
dostęp. przedmioty tutaj i teraz

71
00:06:06,040 --> 00:06:10,570
przekazujemy przedmioty do przedmiotu zamówienia, a zatem teraz możemy je również tam wyprowadzić.

72
00:06:10,570 --> 00:06:17,720
Więc jeśli spróbujesz jeszcze raz, a my złożymy tutaj nowe zamówienie i po prostu się temu przyjrzymy,

73
00:06:17,740 --> 00:06:22,540
teraz to działa, mamy problem z kluczem, który naprawimy za chwilę.

74
00:06:22,540 --> 00:06:27,020
Najpierw wypróbujmy to również na Androidzie, kliknij teraz zamówienie, a następnie przejdź do

75
00:06:27,310 --> 00:06:33,220
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

76
00:06:33,220 --> 00:06:40,410
pozycje zamówienia były nieco szersze więc to też chcę naprawić. Aby naprawić te błędy, które mamy, ostrzeżenie

77
00:06:40,410 --> 00:06:41,430
wynika

78
00:06:41,430 --> 00:06:48,840
z faktu, że tutaj mapuję moje dane na komponenty React i jeśli zrobimy to ręcznie z

79
00:06:48,840 --> 00:06:55,230
mapą tutaj, musimy przypisać ten kluczowy rekwizyt, jest to podstawowy wymóg React, który

80
00:06:55,230 --> 00:06:57,840
Będę również miał React dla sieci.

81
00:06:57,840 --> 00:07:05,100
Więc tutaj musisz wskazać unikalny identyfikator, a każdy element koszyka tutaj na końcu ma identyfikator produktu, którego możemy

82
00:07:05,100 --> 00:07:10,950
użyć, i możesz to potwierdzić na ekranie koszyka, gdzie na końcu tworzysz ten zestaw

83
00:07:10,950 --> 00:07:12,030
elementów koszyka,

84
00:07:12,030 --> 00:07:18,350
tam przechowujemy ten identyfikator produktu, który będzie unikatowy dla każdego wiersza, więc jest w porządku.

85
00:07:18,390 --> 00:07:28,740
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

86
00:07:28,740 --> 00:07:30,400
i tutaj,

87
00:07:30,470 --> 00:07:35,370
po prostu upewnij się, że ustawiliśmy szerokość 100%, abyśmy

88
00:07:35,580 --> 00:07:43,820
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

89
00:07:43,880 --> 00:07:45,450
do ekranu naszych zamówień i

90
00:07:45,470 --> 00:07:50,630
pokażemy szczegóły, teraz wygląda to tak, jak powinno wyglądać i teraz możemy zobaczyć szczegóły i

91
00:07:50,630 --> 00:07:52,840
ukryć je, może drobną poprawą jest

92
00:07:52,880 --> 00:07:57,800
to, że to tekst powinien się zaktualizować, więc kiedy przeglądamy szczegóły, powinno to oznaczać ukrywanie

93
00:07:57,800 --> 00:08:02,950
szczegółów i nie pokazywanie szczegółów, i oczywiście jest to łatwe do zaimplementowania w elementach zamówienia,

94
00:08:03,020 --> 00:08:09,230
mamy ten przycisk, musimy tylko ustawić ten tekst dynamicznie i sprawdzić, czy pokaż szczegóły, które są tutaj naszym stanem

95
00:08:09,230 --> 00:08:10,610
wewnętrznym, są prawdziwe.

96
00:08:10,610 --> 00:08:19,620
Jeśli tak jest, to tutaj chcę powiedzieć ukryj szczegóły, w przeciwnym razie powiem pokaż szczegóły, a teraz ten tekst

97
00:08:19,620 --> 00:08:25,010
powinien się zmieniać dynamicznie, gdy pokażemy lub ukryjemy nasze dane.

98
00:08:25,070 --> 00:08:28,400
Więc jeśli zamówimy to tutaj po raz ostatni, przyjrzymy

99
00:08:28,400 --> 00:08:31,170
się temu, teraz pokazuje szczegóły, teraz ukrywa

100
00:08:31,280 --> 00:08:34,700
szczegóły, więc teraz to naprawdę działa tak, jak powinno.

101
00:08:34,710 --> 00:08:41,630
Teraz złóżmy także inne zamówienie, aby potwierdzić, że to naprawdę działa. Jeśli zamówimy to tutaj, przejdziemy do

102
00:08:41,630 --> 00:08:48,000
ekranu zamówień, teraz zobaczysz również to drugie zamówienie i możesz je kontrolować niezależnie.

103
00:08:48,080 --> 00:08:53,540
To jest ekran zamówienia i jak możemy tam wydawać zamówienia i jak możemy nawet ponownie użyć tutaj koszyka.