Question

我从搜索中阅读了一些热门文章，到目前为止，没有任何内容适合我的情况。甚至VSCode都能够识别该功能，但是以某种方式，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"
        }
    ]
}

它告诉我它无法读取未定义类型的地图，这对我来说似乎很奇怪，因为当我将鼠标悬停在VSCode中的地图上时，它实际上显示了正确的功能。有什么见解吗？谢谢

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);

ReactJS无法读取未定义的属性“ map”

1 个答案: