Question

我有以下数据：

{
"data": {
"site": {
  "siteMetadata": {
    "siteLinks": [
      {
        "title": "title 1",
        "submenu": [
          {
            "title": "test-1",
          }
        ]
      },
      {
        "title": "title 2",
        "submenu": [
          {
            "title": "test-2",
          }
        ]
      },
      {
        "title": "title-3",
        "submenu": [
          {
            "title": "test-3",
          }
        ]
      },
      {
        "title": "title-4",
        "submenu": [
          {
            "title": "test-4",
          }
        ]
      }
    ]
  }
}

} }

，并且我正在尝试映射以获取子菜单标题。我已经成功使用以下代码获得了第一个标题，但我正努力将地图放入地图中。

import React from "react"

const Header = props => (
<div>
    {props.siteLinks.map((item, key) => (
        <div>
            <li key={item.title}>{item.title}</li>
        </div>
    ))}
</div>
)

export default Header

任何帮助将不胜感激

Answer 1

您可以在第一个地图功能内添加第二个地图功能

import React from 'react';

const Header = props => (
      <div>
       {props.siteLinks.map((item, key) => (
        <div key={item.title}>
            <li>{item.title}</li>
            {item.submenu.map((x)=>(
              <li key={x.title}>{x.title}</li>
            ))}
        </div>
       ))}
    </div>
)

export default Header;

Answer 2

const Header = props => (
  <div>
    {props.siteLinks.map((item, key) => (
        <div key={`${item.title}-${key}`}>
          <h4>{item.title}</h4>
          {item.submenu && item.submenu.map((subitem, i) => (
            <li key={`${item.title}-${key}-${i}`}>{subitem.title}</li>
          ))}
        </div>
    ))}
  </div>
);

const res = {
    data: {
      site: {
        siteMetadata: {
          siteLinks: [
            {
              title: "title 1",
              submenu: [
                {
                  title: "test-1"
                }
              ]
            },
            {
              title: "title 2",
              submenu: [
                {
                  title: "test-2"
                }
              ]
            },
            {
              title: "title-3",
              submenu: [
                {
                  title: "test-3"
                }
              ]
            },
            {
              title: "title-4",
            }
          ]
        }
      }
    }
  };

  
ReactDOM.render(
  <Header siteLinks={res.data.site.siteMetadata.siteLinks} />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

类似的事情应该起作用，只需要嵌套数组并再次重新映射其输出即可。我建议为每个名称使用唯一的键，而不是标题。

import React from 'react';
import uuid from 'uuidv4';

const Header = props => (
    <div>
        {props.siteLinks.map((item, key) => (
            <div>
                <li key={uuid()}>
                    <h2>{item.title}</h2>
                    {item.submenu.map(subitem => (
                        <p key={uuid()}>{subitem.title}</p>
                    ))}
                </li>
            </div>
        ))}
    </div>
);

export default Header;

在地图内进行映射以获取子数组

3 个答案: