Javascript 为对象中的每个元素渲染到DOM中

我有一个JS对象，其中包含嵌套的对象。如果你想知道细节，它是我的公文包中的一个“项目”对象，其中有7个项目，每个项目都有标题、描述、详细信息和图像url。以下是它的设置方式：

const projects = {
  0: {
    title: "Project name",
    description:
      "A cool description",
    details: [
      "First detail",
      "Second point",
      "Third item"
    ].map(detail => <li>{detail}</li>),
    image: "image_url"
  },
  1: { ... },
  2: { ... },
  ...

const项目={
0: {
标题：“项目名称”，
说明：
“很酷的描述”，
详情：[
“第一细节”，
“第二点”，
“第三项”
].map（detail=>
{detail}
），
图像：“图像url”
},
1: { ... },
2: { ... },
...

现在，基于这些数据，我想将每个项目一个div元素渲染到DOM中，这似乎不太好。我尝试了多种方法，最终我能够将“projects”常量作为道具传递到我需要它的地方，但由于它是一个对象而不是数组，我似乎无法对其使用map方法（您可以看到，我使用该方法渲染列表项）

以下是我目前正在尝试的：

function ProjectList(props) {
  const projects = props.projects;
  const projectItems = projects.map(project => <h1>Test</h1>);

  return <ul>{projectItems}</ul>;
}

功能项目列表（道具）{
const projects=props.projects；
constprojectItems=projects.map（project=>Test）；
返回
{projectItems}
；
}

然后在渲染功能中

<ProjectList projects={projects} />

期望值：7个h1标签表示测试（我想我可以从那里得到它，如果这可以实现的话）

好消息：ProjectList中的projects常量确实返回了相应的对象

坏消息：“projects.map不是一个函数”

所以，基本上我想我要问的是一种有效地迭代嵌套对象并每次将元素呈现到DOM中的方法。如果这是一件非常基本的事情，我很抱歉，但这是我的第一个react项目，我已经尝试了我能想到的所有方法

---

非常感谢您的帮助！

正如其他人所说，您不能映射对象，但可以使用

Object.keys(projects).map( key => <h1>{projects[key].title}</h1>)

Object.keys（projects.map）（key=>{projects[key].title}）

由于您对Project对象使用基于整数的键，因此最好将其声明为如下数组：

const projects = [
    {
        title: "Project name",
        description: "A cool description",
        details: [
            "First detail",
            "Second point",
            "Third item"
        ].map(detail => <li>{detail}</li>),
        image: "image_url"
    },
    { ... },
    { ... }
]

const项目=[
{
标题：“项目名称”，
描述：“一个很酷的描述”，
详情：[
“第一细节”，
“第二点”，
“第三项”
].map（detail=>
{detail}
），
图像：“图像url”
},
{ ... },
{ ... }
]

那你就可以用

projects.map(project => <h1>Test</h1>);

projects.map（project=>Test）；

如果出于某种原因需要元素的索引，可以使用

projects.map((project, index) => <h1>Project {project.title} is index {index}</h1>);

projects.map（（project，index）=>project{project.title}是index{index}）；

最大的问题是项目是一个对象，因此没有map数组函数。也许这个例子会有用

const项目={
0: {
标题：“项目名称”，
说明：
“很酷的描述”，
详情：[
“第一细节”，
“第二点”，
“第三项”
],
图像：“图像url”
},
1: {
标题：“项目名称2”，
说明：
“很酷的描述”，
详情：[
“第一细节”，
“第二点”，
“第三项”
],
图像：“图像url”
}
};
功能项目（道具）{
返回(
{props.item.title}
);
}
函数项目列表（）{
const newProjects=Object.values（项目）；
console.log（'teste'，newProjects）；
返回(

{newProjects.map（项=>
)}

);
}
// ========================================
ReactDOM.render(
,
document.getElementById（'root'））
);
projects
是一个对象。使用
object.values（projects.map
projects
应该是一个数组，如果你想保证元素的顺序正确的话。那么你可以很容易地做
projects.map（…）
const projects = {
  0: {
    title: "Project name",
    description:
      "A cool description",
    details: [
      "First detail",
      "Second point",
      "Third item"
    ],
    image: "image_url"
  },
  1: {
    title: "Project name 2",
    description:
      "A cool description",
    details: [
      "First detail",
      "Second point",
      "Third item"
    ],
    image: "image_url"
  }
};

function ProjectItem(props) {
  return (
    <li>{props.item.title}</li>
  );
}


function ProjectList () {

  const newProjects = Object.values(projects);
  console.log('teste',newProjects);

  return (
    <ul>
      {newProjects.map(item =>
        <ProjectItem key={item.title} item={item} />
       )}
    </ul>
  );
}

// ========================================

ReactDOM.render(
  <ProjectList />,
  document.getElementById('root')
);