Question

我是React JS的新手，我想呈现此JSON，其中包含Category和该类别下的项目列表。考虑state.miData具有来自服务器的此数组响应。它具有类别和该类别下的菜单项列表。我想在UI中将其显示为“类别”，并在该类别下显示属于该类别的项目的列表。

[
  {
    "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>  
);

先谢谢了。

Answer 1

尝试将大括号中的列表项的地图包装起来。

<ul>
 {
   d.items.map((mi) =>
    <li>{mi.menuItemName}</li>
   );
 }
</ul>

如何在React中呈现数组的复杂JSON数组

1 个答案: