React：使用嵌套的 arrays 映射对象数组

Question

我已经筛选了一些已经回答的问题并学到了很多东西，但我被困在格式问题上。

当前设置了我的组件后，我正在渲染：

半栈应用程序开发

Node.js

1. 项目清单
2. 项目清单
3. 项目清单
4. 项目清单
5. 项目清单

这就是我试图呈现的内容。

半栈应用程序开发

1. 项目清单
2. 项目清单
3. 项目清单

Node.js

4. 项目清单
5. 项目清单

我正在映射的数据

const courses = [
   {
     name: "Half Stack application development",
     id: 1,
     parts: [
       {
         name: "Fundamentals of React",
         exercises: 10,
         id: 1,
       },
       {
         name: "Using props to pass data",
         exercises: 7,
         id: 2,
       },
       {
         name: "State of a component",
         exercises: 14,
         id: 3,
       },
       {
         name: "Redux",
         exercises: 11,
         id: 4,
       },
     ],
   },
   {
     name: "Node.js",
     id: 2,
     parts: [
       {
         name: "Routing",
         exercises: 3,
         id: 1,
       },
       {
         name: "Middlewares",
         exercises: 7,
         id: 2,
       },
     ],
   },
 ];

我的组件

const Header = ({ course }) => {
  return (
    <div>
      {course.map((course) => {
        return <h1>{course.name}</h1>;
      })}
    </div>
  );
};

const Course = ({ course }) => {
  return (
    <div>
      <Header course={course} />
      <ul>
        {course.map((item) => {
          return item.parts.map((item) => {
            return (
              <li>
                {item.name} {item.exercises}
              </li>
            );
          });
        })}
      </ul>
    </div>
  );
};

我对主要组件的调用

 return (
    <div>
      <Course course={courses} />
    </div>
  );

希望我的问题很明显，我无法弄清楚如何将 go 分配给数组中的每个 object 并使 header 后跟下面列出的部件数组名称。

如果需要，很高兴提供更多信息，我已经坚持了三天！

作为参考，这是来自 Full Stack Open 2021 课程。 链接在这里https://fullstackopen.com/en/part2/rendering_a_collection_modules#exercises-2-1-2-5

Answer 1

您需要通过课程 map 并在循环内显示 header 然后循环通过零件

courses.map(course => {
 return (
   <div>
   <Header course={course.name}/>   
   {
    course.parts.map(part => display part here)
   }
   </div> 
 )
})