React Vite项目中data.map不是函数错误排查求助

我是React Vite新手，跟着YouTube教程写代码时，Chrome控制台报错：dataDetailSkill[item].data.map is not a function。我想遍历dataDetailSkill.js里的数据，但出现了这个错误，相关代码如下：

组件代码 #

export default function DetailSkill() {
const { item } = useParams();
return (
    <div className="w-screen min-h-screen flex flex-col p-[30px] bg-slate-100  overflow-hidden">
        <Header title={item} />
        <div className="mt-12 flex flex-col gap-4">
            <img src={dataDetailSkill[item].bannerImg} alt="" className="w-full h-[200px] object-cover rounded-lg" />
            <p>{dataDetailSkill[item].description}</p>
            <div className="flex flex-col gap-4">
                {dataDetailSkill[item].data.map((v) => {
                    return <SkillCard title={item} content={v.title} img={v.img} link={v.github} key={v.id} />;
                })}
            </div>
        </div>
        <ModalMenu />
    </div>
);
}

dataDetailSkill.js代码 #

export default {
    html: {
        description: "Membuat website sederhana",
        bannerImg: "https://images.pexels.com/photos/4439901/pexels-photo-4439901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        data: {
            id: 1,
            title: "Membuat website landing page",
            github: "",
            img: "https://images.pexels.com/photos/114907/pexels-photo-114907.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        },
    },
    frontend: {
        description: "Membuat website dengan React JS",
        bannerImg: "https://images.pexels.com/photos/4439901/pexels-photo-4439901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        data: {
            id: 1,
            title: "Membuat website film",
            github: "",
            img: "https://images.pexels.com/photos/114907/pexels-photo-114907.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        },
    },
    it: {
        description: "Sertifikat Kepelatihan saya dalam IT",
        bannerImg: "https://images.pexels.com/photos/4439901/pexels-photo-4439901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        data: {
            id: 1,
            title: "IT Support",
            github: "",
            img: "https://images.pexels.com/photos/196644/pexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        },
    },
    web: {
        description: "Project membuat web design",
        bannerImg: "https://images.pexels.com/photos/4439901/pexels-photo-4439901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        data: {
            id: 1,
            title: "Project saya",
            github: "",
            img: "https://images.pexels.com/photos/196644/pexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        },
    },
};

错误原因 #

你调用dataDetailSkill[item].data.map()时出错，核心问题是：dataDetailSkill里每个分类下的data是单个对象，而map是数组专属方法，不能直接在对象上调用。

两种解决办法 #

办法1：修改数据结构（推荐，适配遍历需求）

把每个分类下的data改成数组，哪怕只有一个元素，这样就能正常使用map：

export default {
    html: {
        description: "Membuat website sederhana",
        bannerImg: "https://images.pexels.com/photos/4439901/pexels-photo-4439901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
        data: [ // 改为数组格式
            {
                id: 1,
                title: "Membuat website landing page",
                github: "",
                img: "https://images.pexels.com/photos/114907/pexels-photo-114907.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
            }
        ],
    },
    // frontend、it、web分类按同样方式修改data为数组
};

修改后原组件的map代码就能正常运行。

办法2：直接渲染单个对象（如果每个分类确实只有一条数据）

如果不需要遍历，直接访问对象属性即可，删掉map逻辑：

<div className="flex flex-col gap-4">
    <SkillCard 
        title={item} 
        content={dataDetailSkill[item].data.title} 
        img={dataDetailSkill[item].data.img} 
        link={dataDetailSkill[item].data.github} 
        key={dataDetailSkill[item].data.id} 
    />
</div>

内容的提问来源于stack exchange，提问作者Dia Siapa