在Javascript中，如何将Map函数用于具有值的数组和作为值的另一个数组

我试图展示课程的一些价值观。如何将map函数用于此数据，它是一个名称为的数组和另一个数组

我试着在Map函数上使用Map函数来创建一个新的数组，但我不能添加课程名称，只能添加部分的名称

预期：

Half Stack application development

Fundamentals of React  10
Using props to pass data 7 
State of Component 14 
Redux 11 

Node.js
Routing 3 
Middlewares 7 

实际：

Fundamentals of React  10
Using props to pass data 7 
State of Component 14 
Redux 11 
Routing 3 
Middlewares 7 

它缺少课程名称和课程的一些分隔

const App = () => {
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 rows = () =>
 courses.map(note => note.parts.map(b => <Course key={b.id} course={b} 
/>));

const Course = ({ course }) => {
return (
   <p>
      {" "}
     {course.name} {course.exercises}
   </p>
  );
 };

const-App=（）=>{
常数课程=[
{
名称：“半栈应用开发”，
id:1，
部分：[
{
名称：“反应基础”，
练习：10，
身份证号码：1
},
{
名称：“使用道具传递数据”，
练习：7，
身份证号码：2
},
{
名称：“组件的状态”，
练习：14，
身份证号码：3
},
{
名称：“Redux”，
练习：11，
身份证号码：4
}
]
},
{
名称：“Node.js”，
id:2，
部分：[
{
名称：“路由”，
练习：3，
身份证号码：1
},
{
名称：“中间商”，
练习：7，
身份证号码：2
}
]
}
];
常量行=（）=>
courses.map（note=>note.parts.map（b=>）；
常量课程=（{Course}）=>{
返回(

{" "}
{课程.名称}{课程.练习}

);
};

您没有从应用程序组件返回任何内容

courses.map(note => note.map(b => <Course key={b.id} course={b} />));

const Course = ({ course }) => {
return (
   <div>
   <p>
      {" "}
     {course.name} 
   </p>
   <p> {course.parts.map(x=> (<div>{x.name} {x.execises}</div>)}</p>
   </div>
  );
 };

您需要返回map调用的结果

还包括：

const rows = () =>
 courses.map(note => note.parts.map(b => <Course key={b.id} course={b} 
/>));

const行=（）=>
courses.map（note=>note.parts.map（b=>）；

正在创建一个数组，并且正在删除课程名称。如果要保留该数据，需要像这样映射该数组：

const rows = () =>
  courses.map(note => {
     return {
       ...note,
       parts: note.parts.map(b => <Course key={b.id} course={b} />)
     }
  }
);

const行=（）=>
课程地图（注=>{
返回{
……注意，
部分：note.parts.map（b=>）
}
}
);

您可以使用reduce和map将所有航向的阵列展平，并映射结果，通常如下所示-

const allCourses = courses.reduce( (agg,course)=>{
    return [...agg, course,...course.parts]
},[])

const rows = allCourses.map( course => <Course key={course.id} course={course} /> )

const allCourses=courses.reduce（（agg，courses）=>{
return[…agg，course，…course.parts]
},[])
const rows=allCourses.map（courses=>）

---

希望这有帮助！

除了获取

部分

之外，我看不到任何代码需要处理

注意

。您需要为此添加代码。您似乎还缺少

应用程序

的

}

和

行的计算
const allCourses = courses.reduce( (agg,course)=>{
    return [...agg, course,...course.parts]
},[])

const rows = allCourses.map( course => <Course key={course.id} course={course} /> )