javascript - 如何使用相同的组件值映射 2 个不同的数组？

Question

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

我正在尝试访问并打印内容courses.parts.names中的第二个数组。 我使用下面的片段成功访问了第一个数组。

courses.map( course => <h2 key = {course.id}> {course.name} <h2/>

但我很难弄清楚如何访问第二个子子数组。

谢谢。

Answer 1

所需的步骤是:

1. 将类(class)数组简化为部分数组

2. 迭代新的部件数组以渲染组件

const courses = [ ... ];
// Step 1
const parts = courses.reduce((parts, course) => {
    return [...parts, ...course.parts];
}, []);

// Step 2
parts.map(part => <h2 key={part.id}>{part.name}<h2/>);