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

【问题标题】：How can I map a 2 different arrays with the same component values?如何映射具有相同组件值的 2 个不同数组？
【发布时间】：2019-11-15 04:56:31
【问题描述】：

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 =&gt; &lt;h2 key = {course.id}&gt; {course.name} &lt;h2/&gt;

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

谢谢。

【问题讨论】：

标签： javascript reactjs ecmascript-6 es6-map

【解决方案1】：

需要的步骤是：

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

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

【讨论】：

【解决方案2】：

试试这个..

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

【讨论】：

谢谢，但这只会打印组件的 id。
这只是为了演示..你可以打印任何你想要的

【解决方案3】：

试试这个：

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

   }
<div/>

【讨论】：

【解决方案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>
          );
        })
      }
      </>
    );

  });
}

希望这会有所帮助！

【讨论】：

【解决方案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>
		})
	}
})

【讨论】：