在jsx中的地图内使用地图

Question

{normalizedData.map(obj => 
    <div key={obj.display_date_numberic}>
        <div>{obj.display_date_numberic}</div>
    </div>

    {!isEmpty(obj.applicants) && obj.map(obj2 => 
        <div className="events">{obj2.person.name}</div>
    )}
)}

我在以下行出现错误：

{!isEmpty(obj.applicants) && obj.map(obj2 =>

为什么我不能在另一个地图中使用地图功能？normalizedData有一个对象数组，每个对象obj都有另一个对象数组。

Answer 1

You can do a map within a map as follows:

例如给定的数据

outerArray: [
  { id: '1st', innerArray: [ 'this', 'that' ]},
  { id: '2nd', innerArray: [ 'some', 'what' ]},
]

你可以使用 JSX：

<ul>
  {outerArray.map(outerElement => {
    return outerElement.innerArray.map(innerElement => (
      <li key={outerElement.id}>
        {innerElement} - {outerElement.id}
      </li>
    ))
  })}
</ul>

或者更简洁一点：

<ul>
  {outerArray.map(outerElement => (
    outerElement.innerArray.map(innerElement => (
      <li key={outerElement.id}>
        {innerElement} - {outerElement.id}
      </li>
    ))
  ))}
</ul>

呈现：

<ul>
<li>this - 1st</li>
<li>that - 1st</li>
<li>some - 2nd</li>
<li>what - 2nd</li>
</ul>

请注意在映射中使用 key= 以确保 React 对每个循环迭代中的元素都有唯一的引用。如果你不这样做，它会警告你！

Answer 2

原因是，您正在尝试render多个元素，而我们不能这样做，我们只能返回一个元素。因此，将所有逻辑和元素包装在一个中，div如下所示：

{normalizedData.map(obj => 
    <div key={obj.display_date_numberic}>
        <div>{obj.display_date_numberic}</div>

        {Array.isArray(obj.applicants) && obj.applicants.map(obj2 => 
           <div className="events">{obj2.person.name}</div>
        )}
    </div>
)}

假设obj.applicants是一个array，使用Array.isArray检查任何值是否是正确的数组

注意：map我们只能在 on 上使用，array不能在 any 上使用object，所以如果 obj 是一个对象并使用它Object.keys(obj)来获取array所有键中的一个，那么就可以使用mapon 。