1
00:00:02,060 --> 00:00:06,950
Menekan tombol detail di sini dalam item pesanan harus memperlihatkan semua item yang kita miliki dan untuk ini, saya

2
00:00:06,950 --> 00:00:08,810
ingin menggunakan item keranjang di sini.

3
00:00:08,840 --> 00:00:14,150
Salah satu cara untuk melakukan ini adalah menangani beberapa kondisi internal di sini dengan bantuan hook status penggunaan yang kami impor dari

4
00:00:14,150 --> 00:00:20,000
Bereaksi di mana kami mengontrol apakah kami sedang melihat detailnya atau tidak. Jadi saya akan menamai detail acara ini dan mengatur

5
00:00:20,120 --> 00:00:22,730
detail acara di sini dan menginisialisasi ini

6
00:00:24,300 --> 00:00:29,680
dengan menggunakan status menjadi salah sehingga kami tidak menampilkan detail pada awalnya dan sekarang ketika kami

7
00:00:30,000 --> 00:00:38,190
menekan tombol ini di sini, saya tentu saja ingin mengubah keadaan ini. Jadi di sana dalam fungsi ini, saya akan memanggil set show

8
00:00:38,200 --> 00:00:43,690
details dan pada dasarnya membalikkan nilainya, untuk ini kita menggunakan sintaks khusus di mana kita meneruskan

9
00:00:43,690 --> 00:00:51,370
fungsi ke fungsi pengaturan negara di sini, di mana kita mendapatkan status sebelumnya dan kemudian mengembalikan status baru berdasarkan pada keadaan sebelumnya

10
00:00:51,370 --> 00:00:53,610
dan di sini, perlu diingat bahwa

11
00:00:53,680 --> 00:00:59,290
keadaan sebelumnya memang salah atau benar tergantung pada detail acara, jadi di sini saya akan mengembalikan

12
00:00:59,290 --> 00:01:05,320
bukan negara sebelumnya untuk mengonversi ini, jika itu salah, saya akan mengembalikan benar sebagai yang baru menyatakan, jika

13
00:01:05,320 --> 00:01:11,200
itu benar, saya akan mengembalikan false sebagai keadaan baru dan saya akan mengatur ini untuk menampilkan detail.

14
00:01:11,200 --> 00:01:18,130
Sekarang kita dapat menggunakan informasi itu di sini untuk menampilkan beberapa konten secara kondisional. Kami dapat memeriksa detail acara dan jika itu benar dan

15
00:01:18,730 --> 00:01:22,930
ini sekarang sintaks Bereaksi kami, kami dapat menggunakan di sini, jadi jika ini

16
00:01:22,930 --> 00:01:29,200
benar, maka kami mengembalikan tampilan ini di sini. Mungkin terlihat aneh pada awalnya tetapi dengan itu kami katakan jika

17
00:01:29,200 --> 00:01:34,340
ini benar dan ini benar dan ini adalah jalan pintas untuk Javascript untuk memeriksa apakah ini benar, nah

18
00:01:34,480 --> 00:01:38,380
ini selalu benar-ish karena ini adalah objek pada akhirnya jadi ini kemudian akan diberikan,

19
00:01:38,380 --> 00:01:39,830
itulah cara kerja Javascript.

20
00:01:39,850 --> 00:01:45,430
Alternatifnya adalah ekspresi ternary atau variabel yang Anda atur di sini yang Anda ubah dengan cek

21
00:01:45,430 --> 00:01:47,920
if dan kemudian output di sana.

22
00:01:47,920 --> 00:01:53,500
Jadi saya akan menggunakan inline expression ini di sini di mana saya menampilkan tampilan ini jika detail

23
00:01:53,560 --> 00:01:57,400
acara benar dan dalam tampilan ini, saya ingin menampilkan semua item.

24
00:01:57,490 --> 00:02:02,650
Jadi dalam pandangan ini, saya akan memiliki output dinamis di mana saya melihat semua item saya

25
00:02:02,650 --> 00:02:05,920
yang saya harapkan untuk mendapatkan pada item prop dari komponen

26
00:02:05,920 --> 00:02:12,400
item pesanan ini dan di sana, kita dapat memetakan data kita ke dalam daftar elemen jsx, ke dalam daftar komponen.

27
00:02:13,150 --> 00:02:21,640
Jadi di sini, saya tentu saja mendapatkan item kereta saya pada akhirnya karena barang-barang dalam pesanan hanyalah barang-barang yang kami miliki di kereta, jadi peta menjalankan fungsi

28
00:02:21,640 --> 00:02:27,610
ini pada setiap item kereta sehingga untuk mengatakan dan memberi kami bahwa barang gerobak itu saat ini terlihat dan

29
00:02:27,610 --> 00:02:33,190
sekarang untuk item ini, kita harus mengembalikan elemen jsx baru yang ingin kita hasilkan dan di situlah saya

30
00:02:33,190 --> 00:02:35,810
menggunakan item keranjang saya untuk menampilkan itu.

31
00:02:35,860 --> 00:02:45,490
Jadi di sini, saya menampilkan item keranjang seperti, bukan keranjang tetapi barang keranjang seperti ini. Sekarang item keranjang jika Anda lihat

32
00:02:45,530 --> 00:02:51,920
mengambil jumlah dan judul sebagai input dan juga menginginkan jumlahnya.

33
00:02:51,920 --> 00:02:57,050
Selain itu, kami memiliki tombol hapus di sana yang tidak saya inginkan pada item pesanan, jadi kami

34
00:02:57,050 --> 00:02:57,970
harus melakukan

35
00:02:58,250 --> 00:03:04,610
sesuatu tentang hal itu tetapi mari kita fokus pada kuantitas, judul dan jumlah untuk saat ini dan meneruskan potongan data ini.

36
00:03:04,610 --> 00:03:13,810
Jadi di sini, kuantitas adalah cartItem. kuantitas, jumlah adalah cartItem.

37
00:03:13,820 --> 00:03:20,810
dan sekarang ingat bahwa apa pun yang kita simpan di sini dalam pesanan, pada item adalah pada akhirnya apa yang kita dapatkan sebagai item

38
00:03:20,810 --> 00:03:22,550
di sini dalam peredam pesanan

39
00:03:22,550 --> 00:03:27,430
kita, jadi apa yang kita dapatkan dalam tindakan kita. Jadi kita mendapatkan item keranjang kita di sana

40
00:03:27,430 --> 00:03:33,950
dan jika kita melihat layar troli dan melihat apa yang kita lewati di sana, maka untuk menambah pesanan, kita meneruskan konstanta item keranjang ini

41
00:03:33,950 --> 00:03:36,970
yang menahan array ini yang kita hasilkan di sini pada akhirnya .

42
00:03:37,010 --> 00:03:39,970
Jadi pada akhirnya, kami memiliki berbagai objek seperti itu di

43
00:03:40,010 --> 00:03:45,110
sana, jadi kami memiliki judul produk, harga produk, jumlah dan jumlah di sana dan itulah yang sekarang dapat kami

44
00:03:45,110 --> 00:03:52,970
kerjakan di sini dalam urutan barang tempat saya membuat keranjang saya item, saya meneruskan cartItem. kuantitas, untuk jumlah itu,

45
00:03:52,970 --> 00:03:59,850
saya meneruskan cartItem. jumlah dan terakhir namun tidak kalah penting

46
00:03:59,860 --> 00:04:08,810
dalam item keranjang, kita juga membutuhkan judul, sehingga akan menjadi cartItem. productTitle apa yang saya sampaikan di sini.

47
00:04:10,420 --> 00:04:16,130
Sekarang masalah yang tersisa seperti yang saya katakan adalah bahwa item keranjang memiliki ikon yang dapat disentuh di sini

48
00:04:16,130 --> 00:04:20,680
untuk menghapusnya, ini hanya masuk akal jika kita menggunakan komponen ini di dalam keranjang,

49
00:04:20,690 --> 00:04:25,890
bukan ketika kita menggunakannya di dalam pesanan yang ingin kita hasilkan yaitu tentu saja hanya baca.

50
00:04:26,030 --> 00:04:34,430
Jadi solusinya adalah bahwa di sini di item keranjang, kami membungkus ini dan hanya berharap untuk mendapatkan prop yang mengatakan misalnya dihapus

51
00:04:34,430 --> 00:04:37,990
dan hanya jika itu benar, pintasan yang sama seperti

52
00:04:38,000 --> 00:04:41,780
yang lalu, kami output opacity terjamah ini, jadi ikon ini

53
00:04:41,810 --> 00:04:43,130
secara umum,

54
00:04:43,220 --> 00:04:45,060
kalau tidak, kita tidak melakukannya.

55
00:04:45,080 --> 00:04:51,150
Jadi sekarang kita memiliki properti yang dapat dihapus ini di item keranjang yang perlu diatur untuk menunjukkan ikon tempat sampah.

56
00:04:51,170 --> 00:04:57,260
Ini berarti bahwa di layar keranjang tempat kami ingin memiliki ikon tempat sampah, ketika kami menggunakan item keranjang

57
00:04:57,620 --> 00:05:01,790
di sana, kami perlu mengatur penghapusan dan pengaturannya seperti ini sudah cukup,

58
00:05:01,790 --> 00:05:07,280
ini membuatnya benar dan kami akan menunjukkannya. Di sisi lain, di item pesanan kami tempat saya

59
00:05:07,430 --> 00:05:12,830
juga menggunakan item keranjang, di sana saya tidak mengatur penghapusan dan oleh karena itu kami tidak akan

60
00:05:12,830 --> 00:05:16,530
merender ikon tempat sampah ini. Jadi mari kita lihat

61
00:05:16,530 --> 00:05:20,550
ini, mari kita simpan dan mari tambahkan item ini

62
00:05:20,550 --> 00:05:27,760
ke troli, tekan order sekarang dan kemudian pergi ke order, klik show details dan saya mendapatkan error,

63
00:05:27,780 --> 00:05:32,310
item props map tidak dapat dipanggil karena undefined adalah bukan obyek.

64
00:05:32,500 --> 00:05:37,800
Alasan untuk itu adalah bahwa saya mencoba untuk menelusuri semua item saya di sini di item pesanan

65
00:05:37,860 --> 00:05:41,640
tetapi di layar pesanan, saya tidak pernah mengatur prop item di sini.

66
00:05:41,640 --> 00:05:47,280
Jadi di layar pesanan untuk item pesanan, selain meneruskan jumlah dan tanggal, kita juga harus mengirimkan

67
00:05:47,280 --> 00:05:53,460
item untuk item pesanan yang kita produksi dan yang tentu saja dapat diterima atau dapat diperoleh dari

68
00:05:53,550 --> 00:05:56,350
data data kami. item yang merupakan pesanan tunggal dan

69
00:05:56,350 --> 00:06:03,030
sekarang jika kita melihat model pesanan, di sana kita akan memiliki properti item ini di sini. Jadi kita bisa

70
00:06:03,030 --> 00:06:05,930
mengakses. item di sini dan sekarang

71
00:06:06,040 --> 00:06:10,570
kami mengirimkan barang ke item pesanan dan karena itu sekarang kami juga dapat menampilkannya di sana.

72
00:06:10,570 --> 00:06:17,720
Jadi sekarang jika Anda mencoba ini lagi dan kami melakukan pemesanan baru di sini dan kami hanya melihat ini, sekarang ini

73
00:06:17,740 --> 00:06:22,540
berfungsi, kami mendapat masalah dengan kunci di sini yang akan kami perbaiki dalam sedetik.

74
00:06:22,540 --> 00:06:27,020
Pertama-tama mari kita coba ini juga di Android, klik order sekarang, lalu pergi ke order,

75
00:06:27,310 --> 00:06:33,220
tunjukkan detailnya, dapatkan peringatan yang sama tetapi saya sudah menulis bahwa ini umumnya berfungsi, meskipun akan lebih baik jika item pesanan

76
00:06:33,220 --> 00:06:40,410
ini sedikit lebih luas jadi itu juga sesuatu yang ingin saya perbaiki. Jadi untuk memperbaiki kesalahan yang kita miliki, peringatan tersebut

77
00:06:40,410 --> 00:06:41,430
berasal dari

78
00:06:41,430 --> 00:06:48,840
fakta bahwa di sini saya memetakan data saya menjadi komponen Bereaksi dan jika kita melakukan ini secara manual dengan

79
00:06:48,840 --> 00:06:55,230
peta di sini, kita perlu menetapkan prop kunci itu, itu adalah persyaratan React inti yang Anda

80
00:06:55,230 --> 00:06:57,840
Akan ada di Bereaksi untuk web juga.

81
00:06:57,840 --> 00:07:05,100
Jadi di sini, Anda harus menunjuk ke pengidentifikasi unik dan setiap item keranjang di sini pada akhirnya memiliki ID produk yang

82
00:07:05,100 --> 00:07:10,950
dapat kami gunakan dan Anda dapat mengonfirmasi ini di layar keranjang tempat Anda membuat array item

83
00:07:10,950 --> 00:07:12,030
keranjang pada

84
00:07:12,030 --> 00:07:18,350
akhirnya, di sana kami menyimpan ID produk itu dan itu akan menjadi unik per baris, jadi tidak masalah.

85
00:07:18,390 --> 00:07:28,740
Sekarang mengenai lebar ini, kita dapat menambahkan gaya di sini, detail item misalnya dan menambahkan di sana di stylesheet dan

86
00:07:28,740 --> 00:07:30,400
di sini,

87
00:07:30,470 --> 00:07:35,370
cukup pastikan bahwa kita menetapkan lebar 100% sehingga kita

88
00:07:35,580 --> 00:07:43,820
mengambil lebar penuh yang tersedia untuk item keranjang. Dan sekarang jika kita mencoba ini lagi dan kita memesan ini dan kemudian

89
00:07:43,880 --> 00:07:45,450
kita pergi ke layar pesanan

90
00:07:45,470 --> 00:07:50,630
kita dan menunjukkan detailnya, sekarang ini terlihat seperti yang seharusnya terlihat dan sekarang kita dapat melihat detail

91
00:07:50,630 --> 00:07:52,840
dan menyembunyikannya, perbaikan kecil mungkin adalah bahwa

92
00:07:52,880 --> 00:07:57,800
ini teks harus diperbarui, jadi ketika kita melihat detailnya, ini seharusnya mengatakan menyembunyikan detail dan tidak

93
00:07:57,800 --> 00:08:02,950
menampilkan detail dan tentu saja itu juga mudah diterapkan dalam item pesanan, di sana kita memiliki

94
00:08:03,020 --> 00:08:09,230
tombol ini, kita hanya perlu mengatur teks ini secara dinamis dan memeriksa apakah acara detail yang merupakan keadaan internal kita

95
00:08:09,230 --> 00:08:10,610
di sini benar.

96
00:08:10,610 --> 00:08:19,620
Jika itu masalahnya, maka di sini saya ingin mengatakan detail sembunyikan, jika tidak saya akan mengatakan detail tayangan dan sekarang teks

97
00:08:19,620 --> 00:08:25,010
ini akan beralih secara dinamis saat kami menampilkan atau menyembunyikan detail kami.

98
00:08:25,070 --> 00:08:28,400
Jadi jika kita memesan ini terakhir kali di sini, kita

99
00:08:28,400 --> 00:08:31,170
melihat ini, sekarang ini menunjukkan detail, sekarang

100
00:08:31,280 --> 00:08:34,700
menyembunyikan detail, jadi sekarang ini benar-benar bekerja dengan cara yang seharusnya.

101
00:08:34,710 --> 00:08:41,630
Sekarang mari kita juga melakukan pemesanan lain, hanya untuk mengonfirmasi bahwa ini benar-benar berfungsi. Jika kami memesan ini di sini, kami pergi

102
00:08:41,630 --> 00:08:48,000
ke layar pesanan, sekarang Anda melihat urutan kedua juga dan Anda dapat mengontrolnya secara mandiri.

103
00:08:48,080 --> 00:08:53,540
Jadi ini adalah layar pesanan dan bagaimana kami dapat menampilkan pesanan di sana dan bagaimana kami bahkan dapat menggunakan kembali item keranjang di sini.