如何映射嵌套 object

Question

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

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

[
   {
    "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 时适当地 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>

Answer 2

如对已接受答案的评论中所述，div 元素不是 buttons 的有效子元素（T.J.Crowder 的评论中的 related question) and while one should assign a key to mapped elements in React using the index of the iterated array is not always ideal. (see the Docs or 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>

如何映射嵌套 object

How to map a nested object

javascript

jsx

reactjs