1 00:00:02,670 --> 00:00:08,610 Jadi kami ingin menemukan makanan yang sesuai dengan kategori yang kami pilih, karena itu sebenarnya dalam komponen layar 2 00:00:08,610 --> 00:00:09,660 makanan kategori, 3 00:00:09,660 --> 00:00:15,000 kami tidak benar-benar tertarik pada kategori yang dipilih tetapi kami sangat tertarik dengan makanan yang termasuk 4 00:00:15,000 --> 00:00:17,150 dalam kategori itu. Sekarang untuk 5 00:00:17,150 --> 00:00:22,910 itu, pertama-tama kita dapat mengimpor array makanan kita karena itu memegang semua makanan yang mungkin 6 00:00:22,910 --> 00:00:28,550 kita miliki dan sekarang kita ingin menyaring yang benar-benar memiliki ID kategori yang kita pilih 7 00:00:28,550 --> 00:00:35,480 di sana, array ID kategori yang setiap makanan memiliki. Anda akan melihat dalam data dummy bahwa setiap makan memiliki larik ID 8 00:00:35,480 --> 00:00:36,680 kategori yang menjadi 9 00:00:36,680 --> 00:00:39,320 miliknya sehingga itulah yang akan kami gunakan untuk memfilter. 10 00:00:39,320 --> 00:00:46,010 Jadi di layar kategori makanan, kami ingin menemukan makanan yang termasuk dalam kategori yang kami pilih dan saya akan menyimpannya dalam 11 00:00:46,070 --> 00:00:49,850 makanan yang ditampilkan dengan nama konstan, namanya tentu saja terserah Anda 12 00:00:49,880 --> 00:00:54,230 dan di sana, saya akan melihat makan, jadi itulah seluruh array makanan dan 13 00:00:54,230 --> 00:01:00,260 gunakan metode filter Javascript menawarkan untuk menjalankan fungsi pada setiap makanan dalam array di mana kita mendapatkan makanan 14 00:01:00,260 --> 00:01:05,840 secara otomatis sebagai argumen dan di mana kita harus mengembalikan true jika itu salah satu makanan yang 15 00:01:06,110 --> 00:01:10,740 kita inginkan untuk menyimpan atau salah jika itu salah satu makanan yang tidak ingin 16 00:01:10,790 --> 00:01:17,510 kami simpan dan kami ingin menyimpan semua makanan di mana properti ID kategori dari makanan yang kami cari berisi ID kategori 17 00:01:17,510 --> 00:01:19,340 yang kami pilih di sini. 18 00:01:20,090 --> 00:01:29,990 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, 19 00:01:30,020 --> 00:01:36,470 jika itu lebih besar atau sama dengan nol karena itu akan menjadi minus satu jika ID 20 00:01:36,470 --> 00:01:43,490 kategori tidak bagian dari ID kategori, jika nol atau lebih besar, maka kita tahu bahwa makanan ini 21 00:01:43,490 --> 00:01:50,540 memiliki ID kategori ini dalam larik ID kategorinya dan ini akan memberi kita array makanan yang ditampilkan untuk 22 00:01:50,540 --> 00:01:53,690 kategori yang dipilih, sekarang itulah yang kami inginkan 23 00:01:53,690 --> 00:01:57,710 untuk ditampilkan di sini. Sekarang untuk ini, saya 24 00:01:57,710 --> 00:02:04,280 memiliki pandangan saya di sini dan dalam pandangan itu, saya sekali lagi ingin membuat daftar dan sekarang akan 25 00:02:04,280 --> 00:02:11,360 menjadi daftar dan bukan kotak, jadi alih-alih tombol yang tidak akan kita perlukan lagi, saya akan mengimpor FlatList di sini 26 00:02:11,360 --> 00:02:13,590 dan kemudian membuat FlatList saya seperti 27 00:02:13,850 --> 00:02:19,910 ini dan sekarang ada data yang saya makan tentu saja adalah array makanan yang ditampilkan karena itulah 28 00:02:19,970 --> 00:02:22,490 makanan yang ingin saya render ke layar. 29 00:02:22,700 --> 00:02:30,140 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 30 00:02:30,140 --> 00:02:37,970 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 31 00:02:37,970 --> 00:02:44,150 tahu bahwa pada setiap makan, saya akan memiliki bidang ID karena itulah yang kami atur di sini dalam model dan itu 32 00:02:44,150 --> 00:02:48,500 akan menjadi apa yang saya gunakan sebagai kunci dalam daftar saya, jadi saya Saya akan 33 00:02:48,500 --> 00:02:50,570 menggunakannya di sini di extractor kunci. 34 00:02:50,570 --> 00:02:56,060 Namun yang lebih penting daripada ekstraktor kunci adalah render item yang tentu saja 35 00:02:56,090 --> 00:03:05,710 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, 36 00:03:05,880 --> 00:03:15,460 saya akan melakukannya di sini di dalam fungsi komponen saya sehingga saya bisa menggunakan alat peraga dan saya akan memberi nama item makanan 37 00:03:15,520 --> 00:03:21,310 render ini, namanya sepenuhnya terserah Anda. Di sana, saya akan mendapatkan beberapa data barang, saya tahu 38 00:03:21,310 --> 00:03:27,940 ini karena daftar datar melewati kita sebagai objek data barang ke dalam fungsi ini dan di sana, kita harus mengembalikan kode 39 00:03:27,940 --> 00:03:34,810 jsx yang seharusnya membuat item makanan dan di sana saya akan membuat sebuah lihat dan untuk saat ini, maka cukup sebuah komponen teks 40 00:03:34,810 --> 00:03:43,390 di sana di mana saya ingin menampilkan itemData. barang. judul, jadi hanya nama makanan untuk saat 41 00:03:43,390 --> 00:03:49,420 ini, nanti kami juga akan menampilkan gambar di sana tetapi untuk sekarang, ini akan dilakukan dan sekarang render 42 00:03:49,660 --> 00:04:00,240 item makan adalah apa yang saya gunakan di sini sebagai fungsi render item harus tunjuk. Ini harus membuat daftar makanan dasar, mari kita 43 00:04:00,240 --> 00:04:07,560 lihat apakah itu berhasil. Jika kita menyimpan ini dan sekarang kita pilih katakanlah Italia, saya melihat spageti dengan saus 44 00:04:07,560 --> 00:04:08,810 tomat, tidak terlihat terlalu buruk. 45 00:04:08,880 --> 00:04:15,120 Cepat dan Mudah, kita melihat empat makanan dan hamburger, kita melihat hamburger klasik, ringan 46 00:04:15,120 --> 00:04:21,640 dan indah, kita melihat dua resep, sehingga sepertinya berhasil, sepertinya resep dipilih berdasarkan kategori yang 47 00:04:21,660 --> 00:04:28,500 kita pilih dan itu tentu saja hebat. Sekarang saatnya lagi untuk bekerja sedikit pada styling karena saya tidak yakin 48 00:04:28,500 --> 00:04:31,170 tentang Anda, tetapi saya pikir kita bisa meningkatkan sedikit.