如何映射嵌套对象

Question

我必须用存储为 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"
        }
      ]
   }
 ]

Answer 1

您可以再次调用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时适当地设置key属性：

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

Answer 2

正如对已接受答案的评论中所指出的， div元素不是buttons有效子元素（ 相关问题），虽然应该使用迭代数组的索引为 React 中的映射元素分配一个key并不总是理想的。 （请参阅 TJCrowder 评论中的文档或相关文章）。

鉴于您正在映射嵌套列表，因此将其结构化似乎更合适。 这里使用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>