如何映射具有相同组件值的 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

试试这个..

courses.map(({parts})=> (
    parts && parts.length && parts.map(({id})=> <h2>{id}</h2>
    ))
)

Answer 2

试试这个：

courses.map( course => <div key = {course.id}>
   {
       ArrayName {course.name} :
       {
           course.parts.map((part, index) => ( <div key={index}>{ part.name }</div> )
       }

   }
<div/>

Answer 3

所需的步骤是：

将课程数组缩减为零件数组
迭代新的零件数组以渲染组件

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

Answer 4

function App() {
  return courses.map((course, index) => {    
    return (
      <>
      <row>
        <h2 key={course.id}> {course.name} </h2>
      </row>
      {
        course.parts.map((part, index) => {
          return (
            <row>
              <p key={part.id}> {part.name} </p>
            </row>
          );
        })
      }
      </>
    );

  });
}

希望对您有所帮助！

Answer 5

该应用程序是一个功能，但您没有 returning 任何东西。因此，请尝试 return 项目或将其更改为变量。

var App = () => { 
  return 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
        }
      ]
    }
  ]
  }

App().map((item)=>{
 if(item.parts){
  item.parts.map((subitem)=>{
   console.log(subitem.name)//<h2>{{subitem.name}}</h2>
  })
 }
})

如何映射具有相同组件值的 2 个不同数组？

How can I map a 2 different arrays with the same component values?

javascript

ecmascript-6

reactjs

es6-map