JavaScript’in harita işlevini kullanarak iç içe dizi nesnesini nasıl çözeceğinizi öğrenin.
Çoğu modern uygulama, API’ler aracılığıyla diğer uygulamalardan ve araçlardan harici verileri tüketir. Bu veriler her tür şemada gelir ve kullanmak istediğinizi elde edene kadar onu yeniden yapılandırmak size kalmıştır. 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 yuvalanmış bir dizi üzerinde nasıl eşleme yapacağınızı öğretecektir.
Harita İşlevini Kullanma
map işlevi, belirli bir dizinin öğeleri üzerinde döner ve her biri için belirtilen deyimi veya kodu döndürür.
Düz bir dizi için harita işlevi şu şekilde çalışır:
const arr = [‘a’, ‘b’, ‘c’];
const result1 = arr.map(element => {
return element;
});
React’te, map işlevini küme parantezleriyle sarmalı ve her yineleme için bir düğüm öğesi döndürmek için bir ok işlevi kullanmalısınız. Yukarıdaki düz dizideki öğeler, aşağıdaki gibi JSX öğeleri olarak oluşturulabilir:
const arr = [‘a’, ‘b’, ‘c’];
function App () {
return (
<>
{arr.map((item, index) => {
<span key={index}>{a}</span>
})}
</>
)
}
Harita işlevinin döndürdüğü her öğeye bir anahtar atadığınızı unutmayın. Bu, React’in değiştirilmiş veya kaldırılmış öğeleri tanımlamasına yardımcı olur. Bu, uzlaşma sürecinde önemlidir.
Bir React Bileşeninde İç İçe Bir Dizi Üzerinde Eşleme
İç içe dizi, başka bir dizi içeren diziye benzer. Örneğin, aşağıdaki reçete dizisi, dizili bir nesne içerir.
const recipes = [
{
id: 716429,
title: “Pasta with Garlic, Scallions, Cauliflower & Breadcrumbs”,
image: “<https://spoonacular.com/recipeImages/716429-312×231.jpg>”,
dishTypes: [
“lunch”,
“main course”,
“main dish”,
“dinner”
],
recipe: {
// recipe data
}
}
]
İç içe dizilere sahip bunun gibi veriler için her dizi için bir harita işlevi kullanmalısınız.
Bu örnekte, aşağıda gösterildiği gibi veri dizisi üzerinde eşleme yapacaksınız:
export default function Recipes() {
return (
<div>
{recipes.map((recipe) => {
return <div key={recipe.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt=”recipe image” />
{recipe.dishTypes.map((type, index) => {
return <span key={index}>{type}</span>
})}
</div>
})}
</div>
)
}
Tarifler bileşeni, yemek tarifleri dizisindeki her tarifin tarif verilerini içeren div öğesini oluşturacaktır.
JavaScript’te Dizilerle Çalışmak
JavaScript, dizilerle çalışmayı kolaylaştıran çok çeşitli dizi yöntemleri sunar. Bu makalede, bir eşleme dizisi yöntemi kullanılarak iç içe diziden verilerin nasıl oluşturulacağı gösterilmiştir. Harita dışında, bir diziye veri göndermenize, iki diziyi birleştirmenize ve hatta bir diziyi sıralamanıza yardımcı olacak yöntemler de vardır.