在 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 有另一个对象数组。

原文由 Giala Jefferson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以按如下方式在地图中创建地图：

例如给定的数据

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 对每个循环迭代中的元素具有唯一引用。如果你不这样做，它会警告你！

原文由 Andy Lorenz 发布，翻译遵循 CC BY-SA 4.0 许可协议