Cara Memetakan Array Bersarang di Komponen Bereaksi

Sebagian besar aplikasi modern menggunakan data eksternal dari aplikasi dan alat lain melalui API. Ini data datang dalam semua jenis skema, dan terserah Anda untuk mendekonstruksi sampai Anda mendapatkan apa yang Anda inginkan menggunakan. Di antara skema ini adalah objek data yang berisi array bersarang. Mungkin sulit untuk merender data semacam ini. Artikel ini akan mengajari Anda cara memetakan array bersarang di komponen React.

Menggunakan Fungsi Peta

Fungsi peta mengulang item dari array yang diberikan dan mengembalikan pernyataan atau kode yang ditentukan untuk masing-masing item.

Untuk larik datar, fungsi peta berfungsi sebagai berikut:

arr arr = ['A', 'B', 'C'];
const result1 = arr.peta (elemen => {
kembali elemen;
});

Di React, Anda harus membungkus fungsi map dengan kurung kurawal dan menggunakan an fungsi panah untuk mengembalikan elemen simpul untuk setiap iterasi. Item dalam array datar di atas dapat dirender sebagai elemen JSX seperti ini:

arr arr = ['A', 'B', 'C']; 
fungsiAplikasi () {
kembali (
<>
 {arr.map((item, indeks) => {
<rentang kunci={indeks}>{A}</span>
 })}
</>
	)
}

Perhatikan bahwa Anda menetapkan kunci untuk setiap elemen yang dikembalikan fungsi peta. Ini membantu React mengidentifikasi item yang telah diubah atau dihapus. Ini penting selama proses rekonsiliasi.

Memetakan Array Bersarang di Komponen Bereaksi

Array bersarang mirip dengan array yang berisi array lain. Misalnya, larik resep berikut berisi objek dengan larik.

const resep = [
 {
 id: 716429,
 judul: "Pasta dengan Bawang Putih, Daun Bawang, Kembang Kol & Tepung roti",
 gambar: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 Jenis hidangan: [
"makan siang",
"menu utama",
"hidangan utama",
"makan malam"
 ],
 resep: {
// data resep
 }
 }
]

Untuk data seperti ini dengan array bersarang, Anda harus menggunakan fungsi map untuk setiap array.

Dalam contoh ini, Anda akan memetakan array data seperti yang ditunjukkan di bawah ini:

eksporbawaanfungsiResep() {
kembali (
<div>
 {resep.peta((resep) => {
 kembali <kunci div={resep.id}>
<h1>{resep.judul}</h1>
<img src={resep.gambar} alt="gambar resep" />
 {recipe.dishTypes.map((jenis, indeks) => {
 kembali <rentang kunci={indeks}>{jenis}</span>
 })}
</div>
 })}
</div>
 )
}

Komponen Resep akan membuat div elemen yang berisi data resep untuk setiap resep dalam larik resep.

Bekerja Dengan Array di JavaScript

JavaScript menawarkan berbagai macam metode larik yang membuat bekerja dengan larik menjadi lebih sederhana. Artikel ini mendemonstrasikan cara merender data dari array bersarang menggunakan metode array peta. Selain peta, ada juga metode untuk membantu Anda mendorong data ke array, menggabungkan dua array, atau bahkan mengurutkan array.