Bagaimana kita bisa menyelesaikan masalah itu sehingga kita di sini perlu menemukan makanan tertentu dan kita tidak bisa menggunakan
pemilih kita di sini di opsi navigasi?
Sekarang ada dua kemungkinan perbaikan - perbaikan nomor satu adalah bahwa kami menggunakan params lama yang baik
untuk berkomunikasi antara komponen dan
opsi navigasi seperti yang saya tunjukkan di modul navigasi. Di sini, di komponen, kita memuat makanan kita, jadi tentu saja
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
meneruskan makanan yang dipilih atau judulnya ke header dan apa pun yang Anda tetapkan di sini adalah params dengan cara
akan digabungkan dengan params yang ada, jadi ini tidak akan menimpanya, sehingga Anda tidak akan menimpa makan
Anda. Apakah yang Anda ambil di sini, itu akan tetap ada, Anda hanya akan
menambahkan sesuatu yang baru, Anda hanya mengganti param jika sudah ada di params.
Jadi di sini, kita bisa menambahkan kunci judul makanan dan mengatur ini ke makanan pilihan. judul.
Sekarang ini berarti bahwa saya mengirim params ini ke header saya ketika komponen ini membuat pada akhirnya.
Sekarang karena ini akan mengubah alat peraga, kita biasanya akan berakhir dalam loop
tak terbatas, jadi untuk memecahkan ini, kita akan menggunakan efek penggunaan di
sini karena saya menunjukkannya di modul navigasi dan benar-benar melakukannya di dalam efek penggunaan.
Jadi di sini kita dapat menggunakan efek penggunaan dan
sebagai ketergantungan, saya akan menentukan array kosong untuk sekarang dan kemudian mengatur params di sini di dalam fungsi efek penggunaan
dan saya
tidak akan memiliki array kosong di sini, alih-alih ketergantungan saya di sini adalah pilihan saya makan.
Ketika itu berubah, saya ingin meneruskan informasi baru ke header. Sekarang kita akan melihat apakah itu berhasil, mari kita pergi ke
header dan
di sana kita sekarang dapat mengambilnya dari parameter.
Jadi di sini saya memiliki judul makanan saya,
saya bisa mendapatkan ini dengan navigationData. navigasi. Judul getParam, itulah nama
yang saya pilih saat mengatur params di sini.
Sekarang dengan judul makanan yang
dipilih di sini, kita dapat mengatur judul header untuk judul makanan itu dan komentar baris ini karena itu tidak akan
berhasil dan mari kita coba ini.
Mari kita simpan ini dan pergi ke halaman detail dan sementara ini
berfungsi, Anda akan melihat masalah. Saat ini dimuat, awalnya tidak ada judul dan ini
hanya muncul setelah beberapa saat.
Jadi hanya setelah ini dimuat penuh, kita melihat judul sembulan di mana
tidak terlalu indah dan
alasannya adalah karena logika kita di sini berfungsi tetapi karena efek penggunaan berjalan
setelah komponen diberikan untuk pertama kalinya, kita tunggu untuk komponen yang di-render untuk
pertama kalinya sampai kami mengirim params ke judul dan itu berarti bahwa ketika transisi ini
masih diputar dan rendering belum sepenuhnya selesai, kami tidak benar-benar menunjukkan judul itu.
Itu sebabnya ini mungkin bukan solusi optimal di
sini dan saya akan mengomentari ini. Solusi yang lebih baik di sini, semurah
kedengarannya tetapi itu juga solusi yang sering Anda gunakan, adalah Anda cukup meneruskan judul yang
kita perlukan di sini dari dalam komponen asal Anda, sehingga Anda memuatnya ketika Anda berada di komponen
yang akan pergi ke komponen ini dan Anda mengirimkannya ke komponen ini sebelum dimuat.
Jadi mari kirim data terlebih dahulu dan kami datang dari
layar favorit atau layar makanan kategori. Di sana, kita pada akhirnya mengetuk sebuah item di daftar makanan dan di
kedua item, di kedua komponen, layar favorit dan layar makanan kategori, kita menggunakan daftar makanan yang
baik karena itu berarti kita bisa pergi ke daftar makanan di sini dan di sana, kami memiliki tindakan navigasi ini dan sekarang hanya
selain melewati ID makan, akan lebih baik jika kami di sini sudah melewati judul makanan karena di sini kami memilikinya tersedia, kan?
itemData. barang. judul, itulah judul makan kami. Dengan hanya memasok di sini, kami
menyelesaikan semua masalah yang kami miliki di layar lain, jadi itulah pendekatan yang ingin kami gunakan di sini.
Jadi dengan mengatur param di sini pada komponen tempat kami memicu aksi navigasi itu ke halaman detail makan, kami memperbaiki masalah
ini karena sekarang Anda melihat judul ada di sana sejak awal dan kami tidak punya masalah sama sekali di sana dan tentu
saja sama juga di Android jika kita mencobanya di sana. Emulator saya agak lambat, tetapi
secara umum Anda bisa melihatnya di sana juga. Jadi begitulah cara kami dapat bekerja dengan data
di header saat kami membutuhkannya dari Redux dan dengan itu, kami memiliki status pertama yang solid, kami dapat
menggunakan data Redux kami. Apa yang sebenarnya tidak dapat kami lakukan
adalah mengubahnya, jadi itulah langkah selanjutnya, kami ingin menambahkan beberapa logika sehingga kami dapat mengubah data, bahwa kami dapat
menandai favorit dan kami dapat memfilter data kami.