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

所需步骤为：

将Courses数组简化为部分数组
遍历新的部件数组以渲染组件

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

在同一组件上映射2个不同的数组

5 个答案: