如何在 React 中渲染复杂的 JSON 数组数组

【问题标题】：How to render a complex JSON array of array in React如何在 React 中渲染复杂的 JSON 数组数组
【发布时间】：2018-12-31 00:33:55
【问题描述】：

我是 React JS 的新手，我想渲染这个 JSON，其中包含类别和该类别下的项目列表。考虑 state.miData 有来自服务器的这个数组响应。它具有该类别下的类别和菜单项列表。我想在 UI 中显示它，例如 Category 以及属于该类别的项目列表。

[
  {
    "category": {
      "name": "Pasta",
      "id": "P1"
    },
    "items": [
      {
        "menuItemId": "1",
        "menuItemName": "Alfredo-Pasta"
      },
      {
        "menuItemId": "2",
        "menuItemName": "Macroni-Pasta"
      }
    ]
  },
  {
    "category": {
      "name": "Burger",
      "id": "B1"
    },
    "items": [
      {
        "menuItemId": "2",
        "menuItemName": "UB-Burger"
      },
      {
        "menuItemId": "1",
        "menuItemName": "Thela-Mela-Burger"
      }
    ]
  }
]

我已经在渲染函数中编写了这段代码，但它不起作用。

const data = this.state.miData
const listItems = data.map((d) => 
        <div>
            <p key={d.category.id}>{d.category.name}</p> 
            <ul>
              d.items.map((mi) =>
                <li>{mi.menuItemName}</li>
              );
            </ul>
        </div>
    );
return (
    <div>
        {listItems}  
    </div>  
);

提前致谢。

【问题讨论】：

• 有什么问题？
• 将 key={mi.menuItemId} 添加到
• 元素以避免警告