将两个不同的数组相互映射

时间:2019-05-13 07:41:51

标签: javascript reactjs array-map

我在reactJS中有两个不同的数组,并且想要在另一个内部映射。

数组日历:

[
  {
     "week_number": 1,
     "from": "Wednesday May 1st 2019",
     "to": "Saturday May 4th 2019"
  },
  {
     "week_number": 2,
     "from": "Sunday May 5th 2019",
     "to": "Saturday May 11th 2019"
  },
  {
     "week_number": 3,
     "from": "Sunday May 12th 2019",
     "to": "Saturday May 18th 2019"
 },

]

和数组行:

[
  {
     "index": 1,
     "name": "job mzito",
     "date": "01/30/2019",
     "regno": "C027-01-1200/2016"
  },
 {
     "index": 2,
     "name": "Samwel Kamwana",
     "date": "01/30/2019",
     "regno": "C027-01-1879/2016"
  },
 {
     "index": 3,
     "name": "denis  mwaniki",
     "date": "02/03/2019",
     "regno": "C027-01-1256/2016"
  },

]

因此,对于日历数组中的每个项目,我都希望将其属性与行数组中的所有项目一起显示。但是下面的map函数什么也不返回。任何帮助将不胜感激。

这是我到目前为止所拥有的:

<div className="content-section">
{calendar.map((period, index) => {
  {data.rows.map(row => 
      {
        return <p key={index}> Week: {period.week_number} Starting From: {period.from} To: {period.to}</p>
        return <p>{row.name}{row.date}{row.regno}</p>
      }
    )}                                     
})}
</div>

1 个答案:

答案 0 :(得分:0)

您的return语句放置不正确,您的日历数据必须在第一个地图中,而行在第二个地图中

<div className="content-section">
    {calendar.map((period, index) => {
        return (
           <React.Fragment>
              <p key={index}> Week: {period.week_number} Starting From: {period.from} To: {period.to}</p>
              {data.rows.map(row => {
                  return <p>{row.name}{row.date}{row.regno}</p>
              })}
           </React.Fragment>     
        )                         
    })}
</div>