React：用嵌套数组映射对象数组

编程问答 2022-05-16

问题描述

我已经筛选了一些已经回答过的问题并学到了很多东西，但我仍然遇到了格式问题。

我的组件设置完成后，我正在渲染：

半栈应用开发

Node.js

  1. 列表项
  2. 列表项
  3. 列表项
  4. 列表项
  5. 列表项

这就是我试图渲染的内容。

半栈应用开发

  1. 列表项
  2. 列表项
  3. 列表项

Node.js

  1. 列表项
  2. 列表项

我正在映射的数据

const courses = [
   {
     name: "Half Stack application development",id: 1,parts: [
       {
         name: "Fundamentals of React",exercises: 10,},{
         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",parts: [
       {
         name: "Routing",exercises: 3,{
         name: "Middlewares",];

我的组件

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

希望我的问题很明显，我无法弄清楚如何转到数组中的每个对象并使标题后跟下面列出的部分数组名称。

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

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

解决方法

您需要通过课程映射并在循环内显示标题，然后循环访问部分

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