javascript - 在 jsx 中的 map 中使用 map

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 =>

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

Answer 1

您可以按如下方式在 map 中创建 map :

例如给定的数据

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