React js map 不是函数

Question

您好，我有以下称为项目列表的组件

const ProjectList = ({projects}) =>{ 
    console.log({projects})
    return(
        <div>
                <h1>Nothing to do</h1>
        </div>
    )
}
export default ProjectList;

道具 {projects} 收到这个：

当我尝试映射对象时，我收到一条名为“projects.map 不是函数”的错误消息

const ProjectList = ({projects}) =>{ 
    console.log({projects})
    return(
        <div>
         {projects && projects.map (project => { 
            return (
                <ProjectSummary project={project} key={project.id}></ProjectSummary>
                )
            })}
        </div>
    )
}

尝试调试，{projects} 对象现在是空的：

Answer 1

一个好的开始是尝试记录Array.isArray(projects)，它显示在您的第二个屏幕截图中，项目正在作为对象返回。如您所知，.map 是一个 Array 原型。

要迭代对象中的键：值对，您可以尝试（类似）：

const projectKeys = Object.keys(projects)
projectKeys.map(key => { return projects[key] });