React中如何对对象列表分组并遍历渲染？附现有map渲染代码

实现分组渲染的步骤 #

要实现按字段分组后渲染订单列表，咱们可以分成两步来做：先把订单数组按指定字段分组，再遍历分组后的结果渲染每组的内容。下面结合你的现有代码来具体实现：

1. 编写分组函数（用Array.reduce实现GroupBy） #

首先，我们可以用数组的reduce方法把orders数组按你想要的字段（比如示例里的category）分组，生成一个结构类似{ 分类名: [对应订单数组], ... }的对象。

你可以直接在渲染逻辑里计算分组结果（数据量不大时），或者抽成组件内的单独方法：

// 按category分组的逻辑
const groupedOrders = orders.reduce((acc, order) => {
  const key = order.category;
  // 如果当前分类还未初始化，先创建空数组
  if (!acc[key]) acc[key] = [];
  // 将当前订单加入对应分类的数组
  acc[key].push(order);
  return acc;
}, {});

2. 修改渲染逻辑，遍历分组后的结果 #

接下来把原来直接渲染orders.map的部分，改成遍历分组后的对象。因为对象不能直接用map，我们用Object.entries()把它转成[分类名, 订单数组]的键值对数组，再逐个渲染每组：

<div className={`content ${isLoading ? 'is-loading' : ''}`}>
  <div className="panel">
    {!isLoading ? (
      orders.length > 0 ? (
        Object.entries(groupedOrders).map(([category, groupOrders]) => (
          <div key={category} className="category-group">
            {/* 渲染分组标题 */}
            <h3 className="category-title">{category}</h3>
            {/* 渲染当前分组下的产品，复用你原来的产品渲染逻辑 */}
            {groupOrders.map((order, index) => {
              const { productname, image, quantity, orderid, category } = order;
              return (
                <div className="product" key={orderid}>
                  <div className="plaatjediv" onClick={this.toggleModal.bind(this)}>
                    <img 
                      className="img-responsive" 
                      data-itemIndex={index} 
                      src={image} 
                      alt={productname}
                    />
                  </div>
                  {/* 补充产品其他信息，和你原代码保持一致即可 */}
                  <div className="product-details">
                    <p>{productname}</p>
                    <p>数量: {quantity}</p>
                    <p>订单ID: {orderid}</p>
                  </div>
                </div>
              );
            })}
          </div>
        ))
      ) : (
        <p>暂无订单数据</p>
      )
    ) : (
      <p>加载中...</p>
    )}
  </div>
</div>

额外提示 #

• 如果要更换分组字段（比如按orderid或者其他自定义字段），只需要修改reduce里的const key = order.category这一行即可。
• 要是你的组件是类组件，建议把分组逻辑抽成单独方法，或者用useMemo（函数组件）来缓存分组结果，避免每次渲染重复计算，提升性能。
• 分组容器的key要保证唯一，如果存在重复分类名，建议结合其他字段生成唯一标识。

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