React中如何渲染复杂数据数组？如何按餐厅分组渲染订单至DOM

嘿，这个需求其实分两步走就很清晰啦——先把你的订单数据按餐厅名称分组，再把分组后的结果渲染到DOM里就行。我给你一步步拆解：

第一步：按餐厅名称分组数据 #

首先，咱们需要把原始的平级订单数组转换成以餐厅名称为键、对应订单数组为值的对象。这里用JavaScript的reduce方法就能轻松实现：

const rawOrders = [
  { "_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 },
];

// 按餐厅名称分组
const groupedOrders = rawOrders.reduce((acc, order) => {
  // 如果当前餐厅还未在分组对象中，初始化一个空数组
  if (!acc[order.name]) {
    acc[order.name] = [];
  }
  // 将当前订单推入对应餐厅的数组
  acc[order.name].push(order);
  return acc;
}, {});

这段代码执行后，groupedOrders的结构会变成这样：

{
  "Restaurant0": [/* 该餐厅的两个订单 */],
  "Restaurant1": [/* 该餐厅的两个订单 */]
}

第二步：在React组件中渲染分组后的数据 #

接下来咱们写一个React组件，把分组好的数据渲染成DOM结构。核心思路是遍历所有餐厅名称，再逐个渲染对应餐厅的订单列表：

import React from 'react';

const RestaurantOrderList = ({ orders }) => {
  // 第一步：分组数据
  const groupedOrders = orders.reduce((acc, order) => {
    if (!acc[order.name]) {
      acc[order.name] = [];
    }
    acc[order.name].push(order);
    return acc;
  }, {});

  // 获取所有餐厅名称的数组，用于遍历渲染
  const restaurantNames = Object.keys(groupedOrders);

  return (
    <div className="restaurant-order-container">
      {restaurantNames.map(restaurantName => (
        <div key={restaurantName} className="restaurant-section">
          {/* 餐厅标题 */}
          <h2>{restaurantName}</h2>
          {/* 订单列表 */}
          <ul className="order-list">
            {groupedOrders[restaurantName].map(order => (
              <li key={`${order._id}-${order.foodName}`} className="order-item">
                <p><strong>餐品：</strong>{order.foodName}</p>
                <p><strong>下单用户：</strong>{order.user}</p>
                <p><strong>下单日期：</strong>{order.orderDate}</p>
                {/* 可根据需求添加其他字段，比如餐厅位置、营业时间 */}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

// 使用组件时传入原始订单数组
export default RestaurantOrderList;

几个关键细节提醒： #

• Key的设置：注意给每个map生成的元素添加唯一key。你的示例数据中_id是重复的，所以我用了${order._id}-${order.foodName}作为订单项的key，确保唯一性。如果实际数据中_id是唯一的，直接用order._id即可。
• 异步数据处理：如果你的订单数据是从API获取的，记得添加加载状态和错误处理：

  const RestaurantOrderList = () => {
    const [orders, setOrders] = React.useState([]);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);
  
    React.useEffect(() => {
      fetch('/your-api-url')
        .then(res => res.json())
        .then(data => {
          setOrders(data);
          setLoading(false);
        })
        .catch(err => {
          setError('加载订单失败，请稍后重试');
          setLoading(false);
        });
    }, []);
  
    if (loading) return <div>加载中...</div>;
    if (error) return <div className="error">{error}</div>;
  
    // 后续分组和渲染逻辑不变
    const groupedOrders = orders.reduce(/* ... */);
    // ...
  };
  

这样就能实现每个餐厅展示专属订单列表的需求啦！

内容的提问来源于stack exchange，提问作者Saban