1 00:00:02,170 --> 00:00:10,150 Bagaimana kita bisa menyelesaikan masalah itu sehingga kita di sini perlu menemukan makanan tertentu dan kita tidak bisa menggunakan 2 00:00:10,600 --> 00:00:13,600 pemilih kita di sini di opsi navigasi? 3 00:00:13,600 --> 00:00:19,960 Sekarang ada dua kemungkinan perbaikan - perbaikan nomor satu adalah bahwa kami menggunakan params lama yang baik 4 00:00:19,990 --> 00:00:22,190 untuk berkomunikasi antara komponen dan 5 00:00:22,210 --> 00:00:29,470 opsi navigasi seperti yang saya tunjukkan di modul navigasi. Di sini, di komponen, kita memuat makanan kita, jadi tentu saja 6 00:00:29,470 --> 00:00:37,310 di sini kita dapat menggunakan props set params navigasi dan sekarang mengatur params ke nilai baru di sini dan sekarang kita dapat menggunakan params set untuk 7 00:00:37,310 --> 00:00:43,300 meneruskan makanan yang dipilih atau judulnya ke header dan apa pun yang Anda tetapkan di sini adalah params dengan cara 8 00:00:43,300 --> 00:00:48,340 akan digabungkan dengan params yang ada, jadi ini tidak akan menimpanya, sehingga Anda tidak akan menimpa makan 9 00:00:48,340 --> 00:00:52,630 Anda. Apakah yang Anda ambil di sini, itu akan tetap ada, Anda hanya akan 10 00:00:52,870 --> 00:00:56,840 menambahkan sesuatu yang baru, Anda hanya mengganti param jika sudah ada di params. 11 00:00:56,920 --> 00:01:04,030 Jadi di sini, kita bisa menambahkan kunci judul makanan dan mengatur ini ke makanan pilihan. judul. 12 00:01:04,050 --> 00:01:13,120 Sekarang ini berarti bahwa saya mengirim params ini ke header saya ketika komponen ini membuat pada akhirnya. 13 00:01:15,800 --> 00:01:20,270 Sekarang karena ini akan mengubah alat peraga, kita biasanya akan berakhir dalam loop 14 00:01:20,270 --> 00:01:24,710 tak terbatas, jadi untuk memecahkan ini, kita akan menggunakan efek penggunaan di 15 00:01:24,800 --> 00:01:29,780 sini karena saya menunjukkannya di modul navigasi dan benar-benar melakukannya di dalam efek penggunaan. 16 00:01:29,780 --> 00:01:32,690 Jadi di sini kita dapat menggunakan efek penggunaan dan 17 00:01:35,230 --> 00:01:41,430 sebagai ketergantungan, saya akan menentukan array kosong untuk sekarang dan kemudian mengatur params di sini di dalam fungsi efek penggunaan 18 00:01:41,440 --> 00:01:42,320 dan saya 19 00:01:42,520 --> 00:01:47,290 tidak akan memiliki array kosong di sini, alih-alih ketergantungan saya di sini adalah pilihan saya makan. 20 00:01:47,290 --> 00:01:55,150 Ketika itu berubah, saya ingin meneruskan informasi baru ke header. Sekarang kita akan melihat apakah itu berhasil, mari kita pergi ke 21 00:01:55,150 --> 00:01:56,250 header dan 22 00:01:56,350 --> 00:01:59,050 di sana kita sekarang dapat mengambilnya dari parameter. 23 00:01:59,050 --> 00:02:01,720 Jadi di sini saya memiliki judul makanan saya, 24 00:02:02,080 --> 00:02:09,240 saya bisa mendapatkan ini dengan navigationData. navigasi. Judul getParam, itulah nama 25 00:02:09,240 --> 00:02:12,660 yang saya pilih saat mengatur params di sini. 26 00:02:19,700 --> 00:02:21,590 Sekarang dengan judul makanan yang 27 00:02:21,590 --> 00:02:28,190 dipilih di sini, kita dapat mengatur judul header untuk judul makanan itu dan komentar baris ini karena itu tidak akan 28 00:02:28,200 --> 00:02:30,140 berhasil dan mari kita coba ini. 29 00:02:30,140 --> 00:02:35,660 Mari kita simpan ini dan pergi ke halaman detail dan sementara ini 30 00:02:35,660 --> 00:02:40,410 berfungsi, Anda akan melihat masalah. Saat ini dimuat, awalnya tidak ada judul dan ini 31 00:02:40,430 --> 00:02:42,140 hanya muncul setelah beberapa saat. 32 00:02:42,140 --> 00:02:47,350 Jadi hanya setelah ini dimuat penuh, kita melihat judul sembulan di mana 33 00:02:47,360 --> 00:02:49,530 tidak terlalu indah dan 34 00:02:49,790 --> 00:02:55,340 alasannya adalah karena logika kita di sini berfungsi tetapi karena efek penggunaan berjalan 35 00:02:55,340 --> 00:03:00,770 setelah komponen diberikan untuk pertama kalinya, kita tunggu untuk komponen yang di-render untuk 36 00:03:00,770 --> 00:03:06,980 pertama kalinya sampai kami mengirim params ke judul dan itu berarti bahwa ketika transisi ini 37 00:03:06,980 --> 00:03:12,400 masih diputar dan rendering belum sepenuhnya selesai, kami tidak benar-benar menunjukkan judul itu. 38 00:03:12,680 --> 00:03:15,630 Itu sebabnya ini mungkin bukan solusi optimal di 39 00:03:15,650 --> 00:03:20,960 sini dan saya akan mengomentari ini. Solusi yang lebih baik di sini, semurah 40 00:03:21,060 --> 00:03:26,310 kedengarannya tetapi itu juga solusi yang sering Anda gunakan, adalah Anda cukup meneruskan judul yang 41 00:03:26,310 --> 00:03:31,800 kita perlukan di sini dari dalam komponen asal Anda, sehingga Anda memuatnya ketika Anda berada di komponen 42 00:03:31,800 --> 00:03:36,510 yang akan pergi ke komponen ini dan Anda mengirimkannya ke komponen ini sebelum dimuat. 43 00:03:36,510 --> 00:03:42,090 Jadi mari kirim data terlebih dahulu dan kami datang dari 44 00:03:42,090 --> 00:03:49,880 layar favorit atau layar makanan kategori. Di sana, kita pada akhirnya mengetuk sebuah item di daftar makanan dan di 45 00:03:49,890 --> 00:03:54,240 kedua item, di kedua komponen, layar favorit dan layar makanan kategori, kita menggunakan daftar makanan yang 46 00:03:54,240 --> 00:04:00,420 baik karena itu berarti kita bisa pergi ke daftar makanan di sini dan di sana, kami memiliki tindakan navigasi ini dan sekarang hanya 47 00:04:00,420 --> 00:04:06,330 selain melewati ID makan, akan lebih baik jika kami di sini sudah melewati judul makanan karena di sini kami memilikinya tersedia, kan? 48 00:04:06,540 --> 00:04:13,350 itemData. barang. judul, itulah judul makan kami. Dengan hanya memasok di sini, kami 49 00:04:13,350 --> 00:04:17,950 menyelesaikan semua masalah yang kami miliki di layar lain, jadi itulah pendekatan yang ingin kami gunakan di sini. 50 00:04:18,090 --> 00:04:24,060 Jadi dengan mengatur param di sini pada komponen tempat kami memicu aksi navigasi itu ke halaman detail makan, kami memperbaiki masalah 51 00:04:24,060 --> 00:04:30,270 ini karena sekarang Anda melihat judul ada di sana sejak awal dan kami tidak punya masalah sama sekali di sana dan tentu 52 00:04:30,270 --> 00:04:36,180 saja sama juga di Android jika kita mencobanya di sana. Emulator saya agak lambat, tetapi 53 00:04:36,180 --> 00:04:43,380 secara umum Anda bisa melihatnya di sana juga. Jadi begitulah cara kami dapat bekerja dengan data 54 00:04:43,380 --> 00:04:50,850 di header saat kami membutuhkannya dari Redux dan dengan itu, kami memiliki status pertama yang solid, kami dapat 55 00:04:50,850 --> 00:04:54,830 menggunakan data Redux kami. Apa yang sebenarnya tidak dapat kami lakukan 56 00:04:54,900 --> 00:04:59,790 adalah mengubahnya, jadi itulah langkah selanjutnya, kami ingin menambahkan beberapa logika sehingga kami dapat mengubah data, bahwa kami dapat 57 00:04:59,880 --> 00:05:01,890 menandai favorit dan kami dapat memfilter data kami.