ReactJS 無法讀取未定義的屬性“地圖”

Question

我已經從搜索中閱讀了一些熱門帖子，但到目前為止沒有任何內容非常適合我的情況。 甚至 VSCode 也能識別出 function，但不知何故 React 不能？

我的 jsx：（編輯：感謝@Dannis Vash，似乎是我最初沒有在這里包含的排序算法破壞了代碼）

import React, {useState, useEffect} from 'react';
import glossaryItems from '../../data/glossary-items.json';

function Glossary(){

    const [items, setItems] = useState(glossaryItems);

    /* Algorithm that's suspected of breaking the code */
    const sortItems = () =>{
        let sortedItems = [...items.glossaryItems].sort((item1, item2) => {
            if(item1.itemName < item2.itemName){
                return -1;
            }
            if(item1.itemName > item2.itemName){
                return 1;
            }
            return 0;
        });

        setItems(sortedItems);
    }

    /* Sorts the items on component render */
    useEffect(()=>{sortItems()},[]);

    const sortedItems = items;
    console.log(sortedItems); // This does log the entire array
    const glossary = sortedItems.glossaryItems.map((item) =>{
        return(
            {item.name}
        );
    });

    return(
        <div>
            <div className="glossary-body">
                {glossary}
            </div>
        </div>
    );
}

export default Glossary;

我的 json：

{
    "glossaryItems":[
        {
            "itemName": "Item 1",
            "to": "www.google.com"
        },
        {
            "itemName": "Item 2",
            "to": "github.com"
        },
        {
            "itemName": "Item 3",
            "to": "127.0.0.1"
        }
    ]
}

它告訴我它無法讀取未定義類型的 map，這對我來說似乎很奇怪，因為當我在 VSCode 中將鼠標懸停在 map 上時，它實際上顯示了正確的 ZC1C425268E68385D1AB5074C17A941F。 有什么見解嗎？ 謝謝

Answer 1

您的項目鍵是itemName而不是name ：

// not item.name
const glossary = items.glossaryItems.map(item => item.itemName);

此外，在sortItems您實際上刪除了glossaryItems鍵：

// Is an array of objects
const sortItems = [...items.glossaryItems];

// While you need is an object: { glossaryItems: [...] }

因此，您需要將其添加回來或不使用它：

setItems({ glossaryItems: sortedItems });
const glossary = items.glossaryItems?.map(item => item.itemName);

// Optionioal chaining.
setItems(sortedItems);
const glossary = items?.map(item => item.itemName);