如何映射嵌套对象答案

【问题标题】：How to map a nested object如何映射嵌套对象
【发布时间】：2021-11-02 13:52:39
【问题描述】：

我必须使用存储为 JSON 对象的数据填充 li 元素。使用“标题”，它的工作原理很简单。但不是在谈论名字的时候价值观。如何映射 subMenu 对象以获取名称？

    <ul>
      {data.map(({ title, subMenu }) => (
                <li className="mobileMenu-body-nav-item">
                    <button className="mobileMenu-body-nav-item-btn"> 
                 *** here I have to put name ***
                    </button>
                </li>
     ))}
    </ul>

JSON 对象

[
   {
    "title": "Breeds",
    "subMenu": [
        {
            "id": 1,
            "name": "Dog Breeds"
        },
        {
            "id": 2,
            "name": "Cat Breeds"
        }
    ]
  },
  {
    "title": "About Pet Adoption",
    "subMenu": [
        {
            "id": 3,
            "name": "About Dog Adoption"
        },
        {
            "id": 4,
            "name": "About Cat Adoption"
        }
      ]
   }
 ]

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

如 cmets 中所接受的答案中所述，div 元素不是buttons (related question) 的有效子元素，而应该使用迭代数组的索引将 key 分配给 React 中的映射元素并不总是理想的。（请参阅 T.J.Crowder 评论中的 Docs 或 related article）。

鉴于您正在映射一个嵌套列表，因此将其结构化似乎更合适。这里使用title 作为外部li 键（尽管更明确的唯一属性会更好）和subMenu.id 作为内部li 的键。

<ul>
  {data.map(({ title, subMenu }) => (
    <li key={title} className='mobileMenu-body-nav-item'>
      <ul>
        {subMenu.map(({ id, name }) => (
          <li key={id}>
            <button className='mobileMenu-body-nav-item-btn'>{name}</button>
          </li>
        ))}
      </ul>
    </li>
  ))}
</ul>

【讨论】：

【解决方案2】：

您可以再次拨打map，如下所示：

 <ul>
    {data.map(({ title, subMenu }) => (
        <li className="mobileMenu-body-nav-item">
            <button className="mobileMenu-body-nav-item-btn">
                {subMenu.map(({ name }) => (<span>{name}</span>))}
            </button>
        </li>
    ))}
</ul>

更改 <span> 标记以匹配您希望呈现的内容。

另外，如果这是 React，请不要忘记在使用 map 时适当地 set the key prop：

<ul>
    {data.map(({ title, subMenu }) => (
        <li key={title} className="mobileMenu-body-nav-item">
            <button className="mobileMenu-body-nav-item-btn">
                {subMenu.map(({ name }) => (<div key={name}>{name}</div>))}
            </button>
        </li>
    ))}
</ul>

【讨论】：

很高兴看到最后的“也”。人们通常会错过指出这一点！
还要注意div 不是button 的有效子代。也许span？
@T.J.Crowder 感谢您的链接！很高兴知道，我今天学到了一些有用的东西。