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

您在代码中遇到的明显错误是，您应该映射到内部地图中的obj.applicants而不是obj，并从外部地图返回单个元素

此外，如果obj.applicants是一个数组，则无需使用isEmpty

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

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

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上使用array，而不能使用任何object，因此如果obj是对象并使用Object.keys(obj)来得到所有密钥的array，然后使用map。

Answer 3

只是建议，您可以使用for代替map

Answer 4

您可以按照以下步骤在地图内制作地图：

例如给定数据

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

您可以使用JSX：

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

或

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

呈现：

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

在jsx中使用地图内的地图

4 个答案: