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