Jadi kami ingin menemukan makanan yang sesuai dengan kategori yang kami pilih, karena itu sebenarnya dalam komponen layar
makanan kategori,
kami tidak benar-benar tertarik pada kategori yang dipilih tetapi kami sangat tertarik dengan makanan yang termasuk
dalam kategori itu. Sekarang untuk
itu, pertama-tama kita dapat mengimpor array makanan kita karena itu memegang semua makanan yang mungkin
kita miliki dan sekarang kita ingin menyaring yang benar-benar memiliki ID kategori yang kita pilih
di sana, array ID kategori yang setiap makanan memiliki. Anda akan melihat dalam data dummy bahwa setiap makan memiliki larik ID
kategori yang menjadi
miliknya sehingga itulah yang akan kami gunakan untuk memfilter.
Jadi di layar kategori makanan, kami ingin menemukan makanan yang termasuk dalam kategori yang kami pilih dan saya akan menyimpannya dalam
makanan yang ditampilkan dengan nama konstan, namanya tentu saja terserah Anda
dan di sana, saya akan melihat makan, jadi itulah seluruh array makanan dan
gunakan metode filter Javascript menawarkan untuk menjalankan fungsi pada setiap makanan dalam array di mana kita mendapatkan makanan
secara otomatis sebagai argumen dan di mana kita harus mengembalikan true jika itu salah satu makanan yang
kita inginkan untuk menyimpan atau salah jika itu salah satu makanan yang tidak ingin
kami simpan dan kami ingin menyimpan semua makanan di mana properti ID kategori dari makanan yang kami cari berisi ID kategori
yang kami pilih di sini.
Jadi di sini, saya akan mengembalikan true jika indeks ID kategori makanan yang juga merupakan metode Javascript, ID kucing yang kami ekstrak dari params rute,
jika itu lebih besar atau sama dengan nol karena itu akan menjadi minus satu jika ID
kategori tidak bagian dari ID kategori, jika nol atau lebih besar, maka kita tahu bahwa makanan ini
memiliki ID kategori ini dalam larik ID kategorinya dan ini akan memberi kita array makanan yang ditampilkan untuk
kategori yang dipilih, sekarang itulah yang kami inginkan
untuk ditampilkan di sini. Sekarang untuk ini, saya
memiliki pandangan saya di sini dan dalam pandangan itu, saya sekali lagi ingin membuat daftar dan sekarang akan
menjadi daftar dan bukan kotak, jadi alih-alih tombol yang tidak akan kita perlukan lagi, saya akan mengimpor FlatList di sini
dan kemudian membuat FlatList saya seperti
ini dan sekarang ada data yang saya makan tentu saja adalah array makanan yang ditampilkan karena itulah
makanan yang ingin saya render ke layar.
Sekarang seperti yang disebutkan sebelumnya, versi modern dari Bereaksi Asli secara otomatis mencari bidang ID dalam makanan untuk menggunakannya sebagai kunci dalam FlatList, jika Anda menggunakan
versi yang lebih lama atau juga hanya untuk berlatih ini lagi, saya akan menambahkan ekstraktor kunci di sini di mana saya mendapatkan item dan indeks dan saya
tahu bahwa pada setiap makan, saya akan memiliki bidang ID karena itulah yang kami atur di sini dalam model dan itu
akan menjadi apa yang saya gunakan sebagai kunci dalam daftar saya, jadi saya Saya akan
menggunakannya di sini di extractor kunci.
Namun yang lebih penting daripada ekstraktor kunci adalah render item yang tentu saja
harus menunjuk pada fungsi yang kita gunakan untuk me-render satu item dalam daftar itu dan di sana saya akan, seperti sebelumnya, mengatur fungsi baru,
saya akan melakukannya di sini di dalam fungsi komponen saya sehingga saya bisa menggunakan alat peraga dan saya akan memberi nama item makanan
render ini, namanya sepenuhnya terserah Anda. Di sana, saya akan mendapatkan beberapa data barang, saya tahu
ini karena daftar datar melewati kita sebagai objek data barang ke dalam fungsi ini dan di sana, kita harus mengembalikan kode
jsx yang seharusnya membuat item makanan dan di sana saya akan membuat sebuah lihat dan untuk saat ini, maka cukup sebuah komponen teks
di sana di mana saya ingin menampilkan itemData. barang. judul, jadi hanya nama makanan untuk saat
ini, nanti kami juga akan menampilkan gambar di sana tetapi untuk sekarang, ini akan dilakukan dan sekarang render
item makan adalah apa yang saya gunakan di sini sebagai fungsi render item harus tunjuk. Ini harus membuat daftar makanan dasar, mari kita
lihat apakah itu berhasil. Jika kita menyimpan ini dan sekarang kita pilih katakanlah Italia, saya melihat spageti dengan saus
tomat, tidak terlihat terlalu buruk.
Cepat dan Mudah, kita melihat empat makanan dan hamburger, kita melihat hamburger klasik, ringan
dan indah, kita melihat dua resep, sehingga sepertinya berhasil, sepertinya resep dipilih berdasarkan kategori yang
kita pilih dan itu tentu saja hebat. Sekarang saatnya lagi untuk bekerja sedikit pada styling karena saya tidak yakin
tentang Anda, tetapi saya pikir kita bisa meningkatkan sedikit.