Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.
JavaScript'in harita işlevini kullanarak iç içe geçmiş bir dizi nesnesini nasıl çözeceğinizi öğrenin.
Çoğu modern uygulama, API'ler aracılığıyla diğer uygulamalardan ve araçlardan gelen harici verileri kullanır. Bu veriler her tür şemada gelir ve istediğinizi elde edene kadar onu yapısöküme uğratmak size kalmıştır. kullanmak. Bu şemalar arasında iç içe diziler içeren veri nesneleri bulunur. Bu tür verileri işlemek zor olabilir. Bu makale size bir React bileşeninde iç içe geçmiş bir diziyi nasıl eşleyeceğinizi öğretecektir.
Harita İşlevini Kullanma
Harita işlevi, belirli bir dizinin öğeleri üzerinde döngü yapar ve her biri için belirtilen ifadeyi veya kodu döndürür.
Düz bir dizi için harita işlevi aşağıdaki gibi çalışır:
sabit dizi = ['A', 'B', 'C'];
sabit sonuç1 = arr.map (öğe => {
geri dönmek eleman;
});
React'te, harita işlevini süslü parantezlerle sarmalı ve bir ok işlevi her yineleme için bir düğüm öğesi döndürmek için. Yukarıdaki düz dizideki öğeler, bunun gibi JSX öğeleri olarak oluşturulabilir:
sabit dizi = ['A', 'B', 'C'];
işlevUygulama () {
geri dönmek (
<>
{arr.map((öğe, dizin) => {
<açıklık anahtarı={dizin}>{A}</span>
})}
</>
)
}
Harita işlevinin döndürdüğü her öğeye bir anahtar atadığınızı unutmayın. Bu, React'in değiştirilen veya kaldırılan öğeleri belirlemesine yardımcı olur. Bu uzlaşma sürecinde önemlidir.
Bir React Bileşeninde Yuvalanmış Bir Dizi Üzerinden Eşleme
Yuvalanmış bir dizi, başka bir dizi içeren bir diziye benzer. Örneğin, aşağıdaki tarif dizisi, dizili bir nesne içerir.
sabit tarifler = [
{
kimlik: 716429,
başlık: "Sarımsaklı, Yeşil Soğanlı, Karnabaharlı Makarna & Galeta unu",
görüntü: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
yemek türleri: [
"öğle yemeği",
"ana dil",
"ana yemek",
"akşam yemeği"
],
yemek tarifi: {
// tarif verileri
}
}
]
Bunun gibi iç içe dizili veriler için, her dizi için bir harita işlevi kullanmalısınız.
Bu örnekte, veri dizisini aşağıda gösterildiği gibi eşlersiniz:
ihracatvarsayılanişlevtarifler() {
geri dönmek (
<div>
{tarifler.map((tarif) => {
geri dönmek <div anahtarı={recipe.id}>
<h1>{tarif.başlığı}</h1>
<img src={tarif.image} alt="yemek tarifi resmi" />
{recipe.dishTypes.map((tip, indeks) => {
geri dönmek <açıklık anahtarı={dizin}>{tip}</span>
})}
</div>
})}
</div>
)
}
Tarifler bileşeni, div tarifler dizisindeki her tarif için tarif verilerini içeren öğe.
JavaScript'te Dizilerle Çalışmak
JavaScript, dizilerle çalışmayı kolaylaştıran çok çeşitli dizi yöntemleri sunar. Bu makale, bir harita dizisi yöntemi kullanılarak iç içe geçmiş bir diziden verilerin nasıl oluşturulacağını gösterdi. Harita dışında, verileri bir diziye aktarmanıza, iki diziyi birleştirmenize ve hatta bir diziyi sıralamanıza yardımcı olacak yöntemler de vardır.
