时间戳

首页 > 解决方案 > 如何将 Map 函数用于具有值的数组和另一个数组作为 Javascript 中的值

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

问题描述

我正在尝试显示课程的一些价值。我如何对这个数据使用 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>
  );
 };

标签： javascriptreactjs

解决方案

您可以使用 reduce 将所有课程的数组展平，并通常像这样映射结果 -

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

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

希望这可以帮助！

推荐阅读