Menekan tombol detail di sini dalam item pesanan harus memperlihatkan semua item yang kita miliki dan untuk ini, saya
ingin menggunakan item keranjang di sini.
Salah satu cara untuk melakukan ini adalah menangani beberapa kondisi internal di sini dengan bantuan hook status penggunaan yang kami impor dari
Bereaksi di mana kami mengontrol apakah kami sedang melihat detailnya atau tidak. Jadi saya akan menamai detail acara ini dan mengatur
detail acara di sini dan menginisialisasi ini
dengan menggunakan status menjadi salah sehingga kami tidak menampilkan detail pada awalnya dan sekarang ketika kami
menekan tombol ini di sini, saya tentu saja ingin mengubah keadaan ini. Jadi di sana dalam fungsi ini, saya akan memanggil set show
details dan pada dasarnya membalikkan nilainya, untuk ini kita menggunakan sintaks khusus di mana kita meneruskan
fungsi ke fungsi pengaturan negara di sini, di mana kita mendapatkan status sebelumnya dan kemudian mengembalikan status baru berdasarkan pada keadaan sebelumnya
dan di sini, perlu diingat bahwa
keadaan sebelumnya memang salah atau benar tergantung pada detail acara, jadi di sini saya akan mengembalikan
bukan negara sebelumnya untuk mengonversi ini, jika itu salah, saya akan mengembalikan benar sebagai yang baru menyatakan, jika
itu benar, saya akan mengembalikan false sebagai keadaan baru dan saya akan mengatur ini untuk menampilkan detail.
Sekarang kita dapat menggunakan informasi itu di sini untuk menampilkan beberapa konten secara kondisional. Kami dapat memeriksa detail acara dan jika itu benar dan
ini sekarang sintaks Bereaksi kami, kami dapat menggunakan di sini, jadi jika ini
benar, maka kami mengembalikan tampilan ini di sini. Mungkin terlihat aneh pada awalnya tetapi dengan itu kami katakan jika
ini benar dan ini benar dan ini adalah jalan pintas untuk Javascript untuk memeriksa apakah ini benar, nah
ini selalu benar-ish karena ini adalah objek pada akhirnya jadi ini kemudian akan diberikan,
itulah cara kerja Javascript.
Alternatifnya adalah ekspresi ternary atau variabel yang Anda atur di sini yang Anda ubah dengan cek
if dan kemudian output di sana.
Jadi saya akan menggunakan inline expression ini di sini di mana saya menampilkan tampilan ini jika detail
acara benar dan dalam tampilan ini, saya ingin menampilkan semua item.
Jadi dalam pandangan ini, saya akan memiliki output dinamis di mana saya melihat semua item saya
yang saya harapkan untuk mendapatkan pada item prop dari komponen
item pesanan ini dan di sana, kita dapat memetakan data kita ke dalam daftar elemen jsx, ke dalam daftar komponen.
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
ini pada setiap item kereta sehingga untuk mengatakan dan memberi kami bahwa barang gerobak itu saat ini terlihat dan
sekarang untuk item ini, kita harus mengembalikan elemen jsx baru yang ingin kita hasilkan dan di situlah saya
menggunakan item keranjang saya untuk menampilkan itu.
Jadi di sini, saya menampilkan item keranjang seperti, bukan keranjang tetapi barang keranjang seperti ini. Sekarang item keranjang jika Anda lihat
mengambil jumlah dan judul sebagai input dan juga menginginkan jumlahnya.
Selain itu, kami memiliki tombol hapus di sana yang tidak saya inginkan pada item pesanan, jadi kami
harus melakukan
sesuatu tentang hal itu tetapi mari kita fokus pada kuantitas, judul dan jumlah untuk saat ini dan meneruskan potongan data ini.
Jadi di sini, kuantitas adalah cartItem. kuantitas, jumlah adalah cartItem.
dan sekarang ingat bahwa apa pun yang kita simpan di sini dalam pesanan, pada item adalah pada akhirnya apa yang kita dapatkan sebagai item
di sini dalam peredam pesanan
kita, jadi apa yang kita dapatkan dalam tindakan kita. Jadi kita mendapatkan item keranjang kita di sana
dan jika kita melihat layar troli dan melihat apa yang kita lewati di sana, maka untuk menambah pesanan, kita meneruskan konstanta item keranjang ini
yang menahan array ini yang kita hasilkan di sini pada akhirnya .
Jadi pada akhirnya, kami memiliki berbagai objek seperti itu di
sana, jadi kami memiliki judul produk, harga produk, jumlah dan jumlah di sana dan itulah yang sekarang dapat kami
kerjakan di sini dalam urutan barang tempat saya membuat keranjang saya item, saya meneruskan cartItem. kuantitas, untuk jumlah itu,
saya meneruskan cartItem. jumlah dan terakhir namun tidak kalah penting
dalam item keranjang, kita juga membutuhkan judul, sehingga akan menjadi cartItem. productTitle apa yang saya sampaikan di sini.
Sekarang masalah yang tersisa seperti yang saya katakan adalah bahwa item keranjang memiliki ikon yang dapat disentuh di sini
untuk menghapusnya, ini hanya masuk akal jika kita menggunakan komponen ini di dalam keranjang,
bukan ketika kita menggunakannya di dalam pesanan yang ingin kita hasilkan yaitu tentu saja hanya baca.
Jadi solusinya adalah bahwa di sini di item keranjang, kami membungkus ini dan hanya berharap untuk mendapatkan prop yang mengatakan misalnya dihapus
dan hanya jika itu benar, pintasan yang sama seperti
yang lalu, kami output opacity terjamah ini, jadi ikon ini
secara umum,
kalau tidak, kita tidak melakukannya.
Jadi sekarang kita memiliki properti yang dapat dihapus ini di item keranjang yang perlu diatur untuk menunjukkan ikon tempat sampah.
Ini berarti bahwa di layar keranjang tempat kami ingin memiliki ikon tempat sampah, ketika kami menggunakan item keranjang
di sana, kami perlu mengatur penghapusan dan pengaturannya seperti ini sudah cukup,
ini membuatnya benar dan kami akan menunjukkannya. Di sisi lain, di item pesanan kami tempat saya
juga menggunakan item keranjang, di sana saya tidak mengatur penghapusan dan oleh karena itu kami tidak akan
merender ikon tempat sampah ini. Jadi mari kita lihat
ini, mari kita simpan dan mari tambahkan item ini
ke troli, tekan order sekarang dan kemudian pergi ke order, klik show details dan saya mendapatkan error,
item props map tidak dapat dipanggil karena undefined adalah bukan obyek.
Alasan untuk itu adalah bahwa saya mencoba untuk menelusuri semua item saya di sini di item pesanan
tetapi di layar pesanan, saya tidak pernah mengatur prop item di sini.
Jadi di layar pesanan untuk item pesanan, selain meneruskan jumlah dan tanggal, kita juga harus mengirimkan
item untuk item pesanan yang kita produksi dan yang tentu saja dapat diterima atau dapat diperoleh dari
data data kami. item yang merupakan pesanan tunggal dan
sekarang jika kita melihat model pesanan, di sana kita akan memiliki properti item ini di sini. Jadi kita bisa
mengakses. item di sini dan sekarang
kami mengirimkan barang ke item pesanan dan karena itu sekarang kami juga dapat menampilkannya di sana.
Jadi sekarang jika Anda mencoba ini lagi dan kami melakukan pemesanan baru di sini dan kami hanya melihat ini, sekarang ini
berfungsi, kami mendapat masalah dengan kunci di sini yang akan kami perbaiki dalam sedetik.
Pertama-tama mari kita coba ini juga di Android, klik order sekarang, lalu pergi ke order,
tunjukkan detailnya, dapatkan peringatan yang sama tetapi saya sudah menulis bahwa ini umumnya berfungsi, meskipun akan lebih baik jika item pesanan
ini sedikit lebih luas jadi itu juga sesuatu yang ingin saya perbaiki. Jadi untuk memperbaiki kesalahan yang kita miliki, peringatan tersebut
berasal dari
fakta bahwa di sini saya memetakan data saya menjadi komponen Bereaksi dan jika kita melakukan ini secara manual dengan
peta di sini, kita perlu menetapkan prop kunci itu, itu adalah persyaratan React inti yang Anda
Akan ada di Bereaksi untuk web juga.
Jadi di sini, Anda harus menunjuk ke pengidentifikasi unik dan setiap item keranjang di sini pada akhirnya memiliki ID produk yang
dapat kami gunakan dan Anda dapat mengonfirmasi ini di layar keranjang tempat Anda membuat array item
keranjang pada
akhirnya, di sana kami menyimpan ID produk itu dan itu akan menjadi unik per baris, jadi tidak masalah.
Sekarang mengenai lebar ini, kita dapat menambahkan gaya di sini, detail item misalnya dan menambahkan di sana di stylesheet dan
di sini,
cukup pastikan bahwa kita menetapkan lebar 100% sehingga kita
mengambil lebar penuh yang tersedia untuk item keranjang. Dan sekarang jika kita mencoba ini lagi dan kita memesan ini dan kemudian
kita pergi ke layar pesanan
kita dan menunjukkan detailnya, sekarang ini terlihat seperti yang seharusnya terlihat dan sekarang kita dapat melihat detail
dan menyembunyikannya, perbaikan kecil mungkin adalah bahwa
ini teks harus diperbarui, jadi ketika kita melihat detailnya, ini seharusnya mengatakan menyembunyikan detail dan tidak
menampilkan detail dan tentu saja itu juga mudah diterapkan dalam item pesanan, di sana kita memiliki
tombol ini, kita hanya perlu mengatur teks ini secara dinamis dan memeriksa apakah acara detail yang merupakan keadaan internal kita
di sini benar.
Jika itu masalahnya, maka di sini saya ingin mengatakan detail sembunyikan, jika tidak saya akan mengatakan detail tayangan dan sekarang teks
ini akan beralih secara dinamis saat kami menampilkan atau menyembunyikan detail kami.
Jadi jika kita memesan ini terakhir kali di sini, kita
melihat ini, sekarang ini menunjukkan detail, sekarang
menyembunyikan detail, jadi sekarang ini benar-benar bekerja dengan cara yang seharusnya.
Sekarang mari kita juga melakukan pemesanan lain, hanya untuk mengonfirmasi bahwa ini benar-benar berfungsi. Jika kami memesan ini di sini, kami pergi
ke layar pesanan, sekarang Anda melihat urutan kedua juga dan Anda dapat mengontrolnya secara mandiri.
Jadi ini adalah layar pesanan dan bagaimana kami dapat menampilkan pesanan di sana dan bagaimana kami bahkan dapat menggunakan kembali item keranjang di sini.