Bagaimana kita bisa menampilkan array data sebagai elemen J sebagai X?
Sebenarnya ini relatif sepele.
Kami akan memetakan array pekerjaan ini, objek ke array J. S. Elemen X karena REACT mampu
menghasilkan array elemen JavaScript.
Untuk itu, izinkan saya menunjukkan kepada Anda bagaimana ini bekerja.
Mari kita gunakan kurung kurawal tunggal ini, karena saya ingin menambahkan ekspresi JavaScript di sini.
Dalam ekspresi saya, di sini adalah array sederhana, tetapi array daftar item.
Hai.
Dan satu lagi.
Ini berfungsi, saya output ini dalam kode J is X saya dengan kurung kurawal tunggal karena tahun ini tentu saja bukan J adalah
X, ini adalah array, tetapi array penuh dengan J adalah X.
Dan jika saya menyimpannya, outputnya tinggi dan ini berfungsi.
Kami mendapatkan kesalahan atau peringatan yang dapat Anda abaikan untuk saat ini.
Tetapi ini bekerja secara umum.
Sekarang, karena ini bekerja dengan data kode keras, kami juga dapat menampilkan berbagai tujuan kami sehingga kami dapat menampilkan sasaran alat
peraga di sini.
Tetapi masalahnya adalah bahwa alat peraga sasaran pada akhirnya adalah array dari objek JavaScript, bukan array dari J.
Kode ASIC.
Jadi jika kita mencoba output tahun ini.
Itu akan gagal.
Ini memberi tahu Anda bahwa objek tidak valid sebagai reaksi anak.
Padahal kita punya anak.
Jadi pada akhirnya, kita tidak bisa menampilkan objek JavaScript vanilla polos di J adalah X.
Sebagai gantinya, kita perlu memetakan setiap objek menjadi J sebagai X yang setara.
Jadi menjadi elemen yang terbarukan.
Jadi di sini kita ingin memetakan setiap objek menjadi daftar item pada akhirnya.
Begitu juga dengan alat peraga tujuan, yang merupakan array.
Kita bisa memanggil metode peta.
Itu metode JavaScript vanilla default yang ada pada array apa pun.
Metode peta mengambil fungsi.
Di sini, saya akan melewatkan fungsi panah yang dijalankan pada setiap elemen array.
Anda memanggil peta dan kemudian disfungsi di sini akan kembali.
Transformasikan kata-kata elemen itu di dalam array asli dan keseluruhan peta kemudian akan mengembalikan array baru yang penuh
dengan potongan data yang diubah ini.
Jadi fungsi ini akan menerima elemen yang ada di sini.
Jadi, setiap sasaran dalam array tujuan kami dan kemudian mengembalikan elemen baru.
Jadi dalam array baru ini, kembali dengan peta, saya ingin memiliki sekelompok elemen J memiliki X.
Jadi di sini saya hanya akan mengembalikan item daftar.
Yang mana dia mantan, tentu saja.
Dan daftar item, saya ingin menampilkan teks emas saya, tidak ada tujuan di sini adalah objek JavaScript yang kami miliki di
array asli Anda, karena fungsi ini berjalan pada setiap elemen dalam array asli dan memberi
Anda objek dalam tingkat asli atau data potong dalam array asli sebagai argumen.
Jadi tujuan di sini adalah objek itu, yang terlihat seperti tahun ini.
Jadi saya hanya tertarik pada teks di sini.
Dan lagi, kita dapat menampilkan teks dengan mengeluarkan ekspresi JavaScript di sini.
Oleh karena itu, kita perlu mengeriting tanda kurawal di J kita adalah kode X di sini dan kita memiliki tujuan teks titik di sini.
Ekspresi saya adalah bahwa saya mengakses properti teks pada objek emas.
Jadi sekarang yang terjadi di sini adalah saya memetakan array objek JavaScript biasa ke array elemen J adalah X, dan
array seperti G. S. Elemen X adalah render bill, seperti yang Anda pelajari.
Sekarang, hadapi keamanan.
Anda lihat, ini mengecoh keterampilan inti saya lagi.
Sekarang kami juga mendapatkan peringatan mengenai kunci unik yang terkait dengan bagaimana reaksi membuat DOM dan ingin
melakukan ini secara efisien.
Anda belajar lebih banyak tentang itu di React saya, kursus panduan lengkap.
Dan karena itu, kapan pun Anda menampilkan daftar data dengan teknik ini, Anda harus menambahkan prop khusus
untuk setiap item yang Anda render dalam daftar.
Dalam hal ini, untuk setiap item daftar.
Dan itulah prop kunci yang prop yang bereaksi sendiri mengerti.
Dan di sini saya ingin menampilkan tujuan I. D. lagi.
Dibungkus dengan kurung kurawal.
Karena ini adalah ekspresi JavaScript biasa.
Jadi sekarang dengan ayah, kami tidak mendapatkan peringatan dan kami mendapatkan tujuan kursus kami.
Jadi ini adalah bagaimana kami menampilkan daftar data.
Dengan itu, ini terlihat cukup bagus.
Kami mengeluarkan daftar data kami.
Mengapa sekarang kita tidak berupaya menambahkan beberapa fungsi yang memungkinkan kita untuk menambah tujuan kita sendiri?
Itu akan menjadi langkah selanjutnya yang menyenangkan.