React如何在DOM中呈现复杂的数据数组？

Question

如何在 DOM 中进行渲染，以便仅显示特定餐厅名称的所有订单。 因此，每家餐厅都有自己的注册订单清单。 我的数组如下所示：

[ { "_id": "5c6468c77982450218a95acf", "name": "Restaurant0", "location": "Tokio", "workinghours": 18, "user": "asa", "foodName": "Apple Pie", "orderDate": "25.02.2019.", "__v": 0 },
{ "_id": "5c6468c77982450218a95acf", "name": "Restaurant0", "location": "Tokio", "workinghours": 18, "user": "asa", "foodName": "Apple", "orderDate": "25.02.2019.", "__v": 0 },
{ "_id": "5c6468c77982450218a95acf", "name": "Restaurant1", "location": "Tokio", "workinghours": 18, "user": "asa", "foodName": "Apple Pie", "orderDate": "25.02.2019.", "__v": 0 },
 { "_id": "5c6468c77982450218a95acf", "name": "Restaurant1", "location": "Tokio", "workinghours": 18, "user": "asa", "foodName": "Fish sendvich", "orderDate": "25.02.2019.", "__v": 0 },]

DOM 中的每个餐厅都需要有其订单列表。

Answer 1

取决于您是否具有类或函数： 一个例子可以是：

const myComponent = (
<div>
  {myArray.map(item => (
    <div key={item._id}>
      <div>
        {item.name} " food: "{item.foodName}
      </div>
    </div>
  ))}
</div>

）; 作为回报，您可以使用const作为组件：

{MyComponent}