React Bileşeninde İç İçe Diziler Nasıl Eşlenir?

[ByMoDuS]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

React Bileşeninde İç İçe Diziler Nasıl Eşlenir?​

Çoğu modern uygulama, API'ler aracılığıyla diğer uygulamalardan ve araçlardan harici veriler tüketir. Bu veriler her tür şemada gelir ve kullanmak istediğinizi elde edene kadar bunları ayrıştırmak size kalmıştır. Bu şemalar arasında iç içe diziler içeren veri nesneleri de yer alır. 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.​

map fonksiyonu, verilen bir dizinin öğeleri üzerinde döngü yapar ve her biri için belirtilen deyimi veya kodu döndürür.

Düz bir dizi için map işlevi aşağıdaki gibi çalışır:​

const arr = ['a', 'b', 'c'];
const result1 = arr.map(element => {
  return element;
});

React'te, map fonksiyonunu küme parantezleriyle sarmalı ve her yineleme için bir düğüm öğesi döndürmek için bir ok fonksiyonu 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>
            })}
        </>
    )
}

Map fonksiyonunun döndürdüğü her öğeye bir anahtar atadığınızı unutmayın. Bu, React'in değiştirilen veya kaldırılan öğeleri tanımlamasına yardımcı olur. Bu, uzlaştırma işlemi sırasında önemlidir. İç içe dizi, başka bir diziyi içeren bir diziye benzer.​

Örneğin, aşağıdaki tarif dizisi bir dizi ile bir nesne içerir.​

const recipes = [
    {
        id: 716429,
        title: "Pasta with Garlic, Scallions, Cauliflower & Breadcrumbs",
        image: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
        dishTypes: [
            "lunch",
            "main course",
            "main dish",
            "dinner"
        ],
        recipe: {
            // recipe data
        }
    }
 
]

İç içe diziler içeren bu gibi veriler için, her dizi için bir map fonksiyonu kullanmalısınız.

Bu örnekte, veri dizisi üzerinde aşağıda gösterildiği gibi eşleme yaparsı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, tarifler dizisindeki her tarif için tarif verilerini içeren div öğesini oluşturacaktır. JavaScript, dizilerle çalışmayı daha basit hale getiren çok çeşitli dizi yöntemleri sunar. Bu makalede, map dizi yöntemi kullanılarak iç içe geçmiş bir diziden verilerin nasıl işleneceği gösterilmiştir. map dışında, verileri bir diziye itmenize, iki diziyi birleştirmenize ve hatta bir diziyi sıralamanıza yardımcı olacak yöntemler de vardır.​

 

[EJDER]

Paylaşım için teşekkürler.

 

[NaimSazak]

Paylaşım için Teşekkürler

 

[Replicant]

Paylaşım için teşekkürler.

 

[ByMoDuS]

Değerli yorumlarınız için teşekkür ediyorum.