React中映射一個嵌套數組實現demo

更新時間：2022年12月13日 10:32:36 作者：Jovie

這篇文章主要為大家介紹了React中映射一個嵌套數組實現demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

嵌套數組本質上是一個數組的數組，你可以把它們想象成一個表格，或者一個二維網格。為了映射一個嵌套數組，你可以使用平面和映射數組函數的組合，或者使用映射中的映射。

你可能想使用哪種方法取決于你的情況，所以我將用一個例子來解釋。如果你的數據只是一個一維數組，你可以簡單地使用一個普通的地圖，你可以通過這個教程查看。

平面+地圖

flat函數將我們的二維數組轉化為一維數組，然后我們可以簡單地將其映射到上面以產生我們的組件。在這個例子中，我創(chuàng)建了一個簡單的購物清單，并將一些物品按食物類別分組：

const shoppingCart = [
    ['apple', 'banana', 'cherry'],
    ['eggs', 'milk'],
    ['carrots', 'onions'],
];

這里是我們組件的代碼：

function ShoppingListItem({ item }) {
    return <li className="bg-neutral-800 p-2 font-normal shadow">{item}</li>;
}
function ShoppingList() {
    return (
        <div className="flex h-screen w-screen items-center justify-center">
            <div className="flex flex-col items-start justify-center rounded bg-neutral-800 p-8 text-3xl font-bold text-white shadow">
                <h1 className="w-full border-b-8 pb-2">Shopping List</h1>
                <ul>
                    {shoppingCart.flat().map((item) => (
                        <ShoppingListItem key={item} item={item} />
                    ))}
                </ul>
            </div>
        </div>
    );
}

這就是我們的頁面的樣子。

相關的物品被分組了，但為了顯示它們，我們只想得到一個物品的列表。這種方法是最簡單的方法，當你的數據被分組在一起并不重要時，這種方法很有用。代碼更短，但代價是簡化了我們的數據結構。另一個例子可能是像Instagram feed這樣的東西，你從不同的用戶那里得到帖子，然后把它們都放到一個feed中。

使用嵌套地圖

在很多情況下，你可能想保持你的嵌套數據的結構。在這個例子中，我們將重構我們的購物清單，把我們的食物組放在一起：

function ShoppingListItem({ item, white }) {
    return (
        <div
            key={item}
            className={ //Just to have striped rows
                'rounded p-5 ' +
                (white
                    ? 'bg-neutral-700 text-white'
                    : 'bg-neutral-100 text-black')
            }>
            {item}
        </div>
    );
}
function ShoppingListRow({ items, white }) {
    return (
        <li className="flex gap-2">
            {items.map((item) => (
                <ShoppingListItem key={item} item={item} white={white} />
            ))}
        </li>
    );
}
function ShoppingListGrouped() {
    return (
        <div className="flex h-screen w-screen items-center justify-center">
            <div className="flex flex-col items-start justify-center gap-8 rounded bg-neutral-800 p-8 text-3xl font-bold text-white shadow">
                <h1 className="w-full border-b-8 pb-2">Shopping List</h1>
                <ul className="flex flex-col gap-2">
                    {shoppingCart.map((row, i) => {
                        return (
                            <ShoppingListRow
                                key={row.join()}
                                items={row}
                                white={i % 2 === 0}
                            />
                        );
                    })}
                </ul>
            </div>
        </div>
    );
}

為了保持代碼的整潔，我把它分解為一個購物清單項目、一個購物清單行和整個購物清單的組件。我發(fā)現在這種情況下，這是一個非常好的方法，因為你可以從較小的、不太復雜的構件中建立起你的組件。有了這種方法，問題就從如何在一個地圖內進行映射，變成了如何在一個數組上進行映射，并在兩種情況下進行。

下面是我們的更漂亮的購物清單的樣子。