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

试试这个..

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

需要的步骤是：

1. 将课程数组简化为部分数组

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

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

该应用程序是一个函数，但您没有返回任何内容。因此，请尝试返回项目或将 更改为变量。

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