1 00:00:02,260 --> 00:00:03,990 Ayo pergi ke komponen pencarian kami. 2 00:00:04,150 --> 00:00:09,430 Komponen pencarian harus bertanggung jawab untuk bidang inputnya di mana kita misalnya dapat memasukkan apel 3 00:00:09,550 --> 00:00:13,390 dan kemudian kita hanya melihat item yang cocok dengan namanya. 4 00:00:13,780 --> 00:00:19,420 Dan kami sedang melakukan pencarian nama lengkap di sini sehingga kami tidak akan mencari aplikasi tetapi apel memberi sedikit apel 5 00:00:19,870 --> 00:00:21,440 pisang memberi kita semua pisang. 6 00:00:21,460 --> 00:00:22,380 Itulah idenya di sini. 7 00:00:22,390 --> 00:00:27,550 Pemberitahuan Merah tidak berfungsi tentu saja karena pencarian sebagai berikut cukup kosong tidak memiliki logika yang berarti 8 00:00:27,550 --> 00:00:28,490 di sana. 9 00:00:28,540 --> 00:00:32,920 Sekarang saatnya untuk berubah seiring dengan pengetahuan yang kami peroleh sejauh ini. 10 00:00:32,920 --> 00:00:40,000 Pertama-tama mari kita pastikan kita mengatur input pengguna sehingga kita dapat mencambuk menambahkan impor untuk menggunakan keadaan di 11 00:00:40,730 --> 00:00:49,390 sini seperti itu kemudian di sini lagi menggunakan susunan array D untuk memiliki filter yang dimasukkan katakanlah dan atur filter yang dimasukkan 12 00:00:49,750 --> 00:00:58,620 dan kemudian gunakan status dengan string kosong dan mengikat tes di sana mengikat nilai untuk memasukkan filter dan mengikat pada perubahan di sini 13 00:00:59,070 --> 00:01:06,420 ke fungsi yang pembaruan mengatur filter yang dimasukkan kita mendapatkan acara secara otomatis diteruskan dengan bereaksi pada akhirnya 14 00:01:06,420 --> 00:01:13,440 dan kemudian kita sebut setel filter yang dimasukkan dan kita atur ini ke target acara nilai. 15 00:01:13,860 --> 00:01:17,980 Jadi itu adalah sesuatu yang kami lakukan sebelumnya hanya menyimpan nilai di sini. 16 00:01:18,150 --> 00:01:24,600 Tetapi sekarang idenya adalah bahwa setiap kali pengguna mengetik sesuatu yang Anda dengar, kami mencoba mengambil data 17 00:01:24,600 --> 00:01:26,230 yang difilter dari firebase. 18 00:01:26,440 --> 00:01:29,290 Bagaimana kita bisa membuat ini berhasil. 19 00:01:29,320 --> 00:01:35,530 Yah Anda bisa mendaftarkan fungsi untuk perubahan yang pada dasarnya mengirim permintaan HBP pada setiap keystroke akan 20 00:01:36,240 --> 00:01:37,950 bekerja di sini juga. 21 00:01:37,960 --> 00:01:43,400 Saya memperbarui nilai aman dan setiap keystroke dan alih-alih yang dapat kita lakukan 22 00:01:43,570 --> 00:01:53,560 adalah kita dapat menggunakan efek penggunaan di sini ditambahkan di sini dan menguraikan dalam fungsi yang seharusnya membuat permintaan HBP dan kita cukup menentukan filter 23 00:01:53,560 --> 00:01:55,330 yang dimasukkan sebagai ketergantungan. 24 00:01:55,330 --> 00:01:58,900 Dan ini berarti fungsi ini akan mengeksekusi setiap kali filter yang dimasukkan berubah. 25 00:01:58,900 --> 00:02:04,060 Jadi itu memiliki hasil yang sama tetapi menurut saya itu sedikit lebih elegan karena kami benar-benar merangkul 26 00:02:04,060 --> 00:02:10,390 ide orang-orang di sini risiko memadukan disfungsi logika kami hanya memperbarui apa yang dimasukkan pengguna atau hanya pembaruan untuk menyatakan di 27 00:02:10,390 --> 00:02:15,520 mana kami menyimpan apa yang dimasukkan dan dimasukkan oleh pengguna. kemudian gunakan efek akan secara otomatis 28 00:02:15,520 --> 00:02:19,750 dieksekusi setelahnya dan melakukan apa pun yang ingin kita lakukan untuk setiap perubahan. 29 00:02:19,750 --> 00:02:26,350 Jadi di sini saya ingin mengirim permintaan HDP jadi saya akan pergi ke bahan J. S. dan pada dasarnya ambil ke 30 00:02:26,350 --> 00:02:27,400 logika yang 31 00:02:31,520 --> 00:02:39,810 saya miliki di sini untuk mengambil permintaan mari kita ambil itu salin dan tambahkan di sini digunakan efek Anda atau 32 00:02:39,810 --> 00:02:41,060 transformasi yang sama. 33 00:02:41,070 --> 00:02:47,100 Tapi tentu saja pada akhirnya saya tidak memanggil set bahan pengguna tetapi saya ingin memicu sesuatu dalam 34 00:02:47,100 --> 00:02:47,670 bahan. 35 00:02:47,670 --> 00:02:50,650 J. S. Benar karena ayah adalah tempat kami mengelola bahan-bahan kami. 36 00:02:50,760 --> 00:02:53,980 Di situlah kami juga menggunakan komponen pencarian. 37 00:02:54,030 --> 00:02:58,800 Jadi pada akhirnya kita harus membuat koneksi antara pencarian dan komponen bahan ini 38 00:02:58,800 --> 00:03:03,660 untuk memperbarui bahan-bahan di sini setiap kali kita mengambil bahan baru dalam pencarian, katakanlah Chase. 39 00:03:03,880 --> 00:03:10,280 Sekarang tentu saja biasanya untuk itu kami akan menggunakan alat peraga sehingga kami dapat menentukan katakanlah alat peraga pada bahan beban. 40 00:03:10,280 --> 00:03:16,580 Nama sepenuhnya terserah Anda memanggil kami sebagai fungsi dan meneruskan bahan dimuat kami seperti ini. 41 00:03:16,640 --> 00:03:21,940 Jadi semua bahan muat sekarang merupakan fungsi yang saya harapkan pada komponen pencarian saya. 42 00:03:21,950 --> 00:03:28,370 Jadi dalam komponen bahan kita harus menentukan prop ini pada komponen pencarian dan kemudian meneruskan sebuah 43 00:03:28,430 --> 00:03:34,790 titik atau menambahkan fungsi yang harus dijalankan ketika semua bahan memuat disebut dalam komponen pencarian. 44 00:03:34,790 --> 00:03:36,110 Kami belum memiliki fungsi tersebut. 45 00:03:36,110 --> 00:03:43,370 Jadi izinkan saya menambahkan yang baru mungkin di sini di bagian paling atas semua bernama sebagai penangan bahan yang disaring atau apa pun 46 00:03:43,370 --> 00:03:44,770 yang Anda ingin menyebutnya. 47 00:03:44,900 --> 00:03:53,210 Kami mendapatkan bahan yang difilter kami atau apa pun yang Anda ingin menyebutnya sebagai argumen dan ide di sini adalah sederhana yang 48 00:03:53,210 --> 00:03:55,640 kami sebut bahan pengguna yang ditetapkan. 49 00:03:55,640 --> 00:03:59,930 Kami disetel sama dengan bahan yang difilter karena bahan tersebut harus sudah dalam format yang benar. 50 00:04:00,230 --> 00:04:01,970 Jadi fungsinya sangat sederhana. 51 00:04:02,130 --> 00:04:08,240 Kemudian meneruskan pointer pada fungsi ini untuk memuat bahan pada komponen pencarian sehingga kita dapat memanggil 52 00:04:08,240 --> 00:04:10,990 fungsi ini dari dalam komponen pencarian. 53 00:04:11,010 --> 00:04:17,930 Sekarang kembali dalam komponen pencarian mengingat ini sekarang dengan Ayah kami memiliki fakta yang menjalankan perubahan filter apa pun yang 54 00:04:17,930 --> 00:04:20,700 dimasukkan tetapi sekarang di sini kita mendapatkan peringatan. 55 00:04:20,990 --> 00:04:24,180 Pada akhirnya masalahnya adalah kita mengandalkan alat peraga di sini. 56 00:04:24,320 --> 00:04:29,480 Tetapi kami belum menetapkan mereka sebagai ketergantungan dan itu berarti bahwa jika props diubah, komponen 57 00:04:29,480 --> 00:04:35,930 ini akan di-render, tetapi efek ini tidak akan dijalankan kembali karena kami belum menginformasikan efek tentang fakta bahwa 58 00:04:35,960 --> 00:04:37,430 props adalah dependensi. 59 00:04:37,450 --> 00:04:42,380 Sekarang Anda mungkin berkata baik, saya hanya menunjuk fungsi di sini bahwa fungsi tidak boleh berubah. 60 00:04:42,380 --> 00:04:46,780 Jadi sebenarnya itu tidak boleh dijalankan kembali jika alat peraga berubah. 61 00:04:46,880 --> 00:04:50,090 Yah Anda tidak boleh menipu tentang dependensi Anda. 62 00:04:50,120 --> 00:04:55,790 Merupakan praktik yang baik untuk selalu jelas tentang semua dependensi yang Anda miliki di sini, mungkin sebagai dependensi. 63 00:04:55,790 --> 00:04:58,040 Tapi tetap saja kita akan memiliki masalah dengan itu. 64 00:04:58,280 --> 00:05:02,030 Sekarang apakah mempengaruhi akan menjalankan kembali setiap kali alat peraga berubah. 65 00:05:02,030 --> 00:05:08,570 Itu pada dasarnya terjadi setiap kali sesuatu yang dilewatkan ke komponen ini di sini berubah atau setiap kali apa pun 66 00:05:08,620 --> 00:05:10,120 dalam komponen induk berubah. 67 00:05:10,190 --> 00:05:11,900 Itu semua bukan yang kita inginkan. 68 00:05:11,900 --> 00:05:15,550 Kami hanya ingin menjalankan kembali fungsi ini jika semua memuat bahan. 69 00:05:15,560 --> 00:05:23,370 Jadi jika fungsi ini menunjuk pada jika itu berubah dan untuk itu kita dapat menggunakan sejumlah sintaks javascript modern 70 00:05:23,370 --> 00:05:28,370 mungkin di sini di bagian paling atas kita melihat array untuk penataan. 71 00:05:28,400 --> 00:05:33,980 Ada juga konsep yang disebut Object dis structuring Brooks dengan cara yang sangat mirip. 72 00:05:33,980 --> 00:05:39,050 Kami memiliki kurung kurawal dalam hal ini di sisi kiri tanda sama dengan di sisi kanan kita 73 00:05:39,170 --> 00:05:43,440 harus objek yang ingin kita struktur atau dari mana kita ingin mengekstrak properti. 74 00:05:43,640 --> 00:05:50,870 Dan kemudian di sini antara kurung kurawal di sisi kiri Anda menentukan nama-nama kunci dalam objek yang ingin Anda ekstrak 75 00:05:51,200 --> 00:05:54,670 dan yang ingin Anda simpan dalam variabel yang terpisah. 76 00:05:54,890 --> 00:05:57,920 Jadi dalam kasus saya di sini yang akan memuat bahan. 77 00:05:57,920 --> 00:06:00,900 Saya tahu ini akan ada sebagai kunci dalam alat peraga. 78 00:06:01,100 --> 00:06:06,560 Saya menyebutnya di sini dan sekarang saya hanya menariknya keluar dan menyimpannya secara terpisah di 79 00:06:06,560 --> 00:06:07,880 memuat konstanta Regan. 80 00:06:07,890 --> 00:06:09,870 Jadi sekarang adalah konstanta yang terpisah. 81 00:06:09,900 --> 00:06:15,250 Di sini kita bisa memanggil bahan muat dan kita bisa menentukan semua bahan memuat sebagai ketergantungan sekarang. 82 00:06:15,260 --> 00:06:19,790 Dan sekarang ini hanya akan menjalankan kembali efek ini jika nilai ini benar-benar berubah. 83 00:06:20,000 --> 00:06:27,110 Jadi jika ada hal lain dan alat peraga yang diubah ini tidak akan dijalankan kembali hanya jika fungsi ini berubah atau jika filter 84 00:06:27,110 --> 00:06:33,490 yang dimasukkan berubah dalam kasus ini kami akan mengirimkan permintaan di sini dan permintaan ini akan mendapatkan data kami. 85 00:06:33,500 --> 00:06:40,180 Kemudian panggil memuat bahan pada akhirnya dan itu harus mengatur bahan kami di sini sekarang. 86 00:06:40,320 --> 00:06:45,530 Namun permintaan saat ini tidak memasukkan D yang dimasukkan ke dalam akun. 87 00:06:45,660 --> 00:06:50,410 Mengambil semua bahan tentu saja harus mengambil bahan yang disaring sebagai gantinya. 88 00:06:50,730 --> 00:06:58,380 Untungnya firebase mendukung pemfilteran kita dapat menambahkan beberapa izin permintaan yang untuk memenangkan variabel terpisah di sini sampai akhir ini Anda 89 00:06:58,380 --> 00:07:04,420 adalah El dan saya ingin memiliki orangtua kueri yang berbeda tergantung pada apakah kita memasukkan sesuatu 90 00:07:04,420 --> 00:07:05,400 atau tidak. 91 00:07:05,410 --> 00:07:12,460 Jadi, jika panjang filter yang dimasukkan sama dengan nol, maka periode kueri saya tidak akan apa-apa. Saya tidak akan parameter apa 92 00:07:12,460 --> 00:07:14,500 pun sehingga hanya string kosong. 93 00:07:14,710 --> 00:07:18,490 Kalau tidak, itu akan menjadi string yang saya gunakan kembali mengambil di sini. 94 00:07:18,490 --> 00:07:24,310 Jadi ini bukan tanda kutip tunggal tetapi tanda centang kembali sehingga kita dapat menggunakan interpolasi 95 00:07:24,310 --> 00:07:32,920 string untuk menyuntikkan nilai secara dinamis di sini dan kemudian Anda harus menambahkan tanda tanya yang diurutkan secara tertulis seperti pembukaan dan penutupan tanda 96 00:07:32,920 --> 00:07:39,090 kutip ganda yang sama dan di antara tanda kutip ganda, bidang yang mana goyah dalam kasus kami. 97 00:07:39,100 --> 00:07:47,940 Itulah bidang judul lalu dan persen sama dengan Q yang ditulis seperti tanda sama dengan tanda kutip ganda yang membuka dan 98 00:07:47,940 --> 00:07:48,650 menutup. 99 00:07:48,720 --> 00:07:53,730 Dan sekarang dengan interpolasi string yang dilakukan dengan tanda dolar dan kemudian membuka 100 00:07:53,730 --> 00:08:00,530 dan menutup kurung kurawal nilai yang dimasukkan dan dimasukkan menyaring kueri ini mengatur kueri yang merupakan string kosong atau 101 00:08:00,590 --> 00:08:06,770 string ini di sini dan ini hanyalah sintaks kombinasi dari permintaan perm dipahami oleh firebase 2 di 102 00:08:06,770 --> 00:08:13,430 filter akhir bidang judul untuk nilai yang dimasukkan di sini kita harus menambahkan tidak pada akhir permintaan kami 103 00:08:13,430 --> 00:08:20,540 di sini sehingga kami dapat menambahkan kueri tambah ditambah kueri di sini pada akhirnya dan itu bahkan dengan string kosong 104 00:08:20,600 --> 00:08:27,800 atau itu setup kueri yang valid sekarang untuk membuat pekerjaan ini kita semua perlu membuat sedikit penyesuaian di firebase, pergi 105 00:08:28,040 --> 00:08:30,260 ke aturan di database Anda. 106 00:08:30,260 --> 00:08:36,860 Sekarang kita perlu menambahkan entri di sini untuk membuka kunci penyaringan menambahkan tanda kutip ganda di sini setelah dibaca hal 107 00:08:37,510 --> 00:08:39,890 yang benar dan ada menambahkan bahan. 108 00:08:39,890 --> 00:08:47,300 Jadi pada dasarnya nama yang Anda miliki sebagai catatan di sini Anda mengirim data Anda ke bahan-bahan maka nilainya tidak 109 00:08:47,300 --> 00:08:53,560 ada objek delapan dan Anda berakhir dengan membuka dan menutup kurung kurawal dan kemudian ada menambahkan string 110 00:08:53,600 --> 00:08:59,060 lain dengan tanda kutip ganda indeks dot yang merupakan perintah dipahami oleh Firebase dan kemudian 111 00:08:59,060 --> 00:09:05,630 ini adalah array lagi dengan nilai string di sana yang pada dasarnya adalah nama bidang yang ingin Anda 112 00:09:05,630 --> 00:09:06,320 saring. 113 00:09:07,220 --> 00:09:14,300 Jadi Anda perlu menambahkan pengaturan ini di sini ke aturan firebase Anda dengan pengaturan yang bisa kami filter untuk judulnya. 114 00:09:14,420 --> 00:09:20,770 Sekarang kami dapat mengirim permintaan di sini sekarang permintaan harus dikirim setiap kali kami mengetikkan sesuatu di sini. 115 00:09:20,800 --> 00:09:22,320 Jadi sekarang mari kita simpan itu. 116 00:09:22,570 --> 00:09:30,680 Kembali untuk membungkus dan Anda melihat oh kami tampaknya berada dalam loop tak terbatas lagi di sini jadi untuk meninggalkannya mari kita mengomentari bahan-bahan 117 00:09:30,680 --> 00:09:35,210 beban dan keamanan dan memuat ulang apa yang menyebabkan loop tak terbatas ini.