如何在React中使用map方法创建多个按分组展示的组件

实现方案 #

方案1：纯单次遍历渲染（完全符合仅一次遍历、无嵌套循环的要求） #

利用变量记录上一次遍历的分组，结合React.cloneElement动态往同分组的ul中追加子元素，全程仅遍历一次原数组：

import React from 'react';

const arr = {
  itmes: [
    { id: 1, group: "veg", item: "apple" },
    { id: 2, group: "veg", item: "carrot" },
    { id: 3, group: "meat", item: "chicken" },
    { id: 4, group: "meat", item: "steak" }
  ]
};

function App() {
  let lastGroup = '';
  const renderNodes = [];

  arr.itmes.forEach(item => {
    // 匹配到新分组
    if (item.group !== lastGroup) {
      // 非首个分组前置分割线
      if (lastGroup) renderNodes.push(<hr key={`split-${item.group}`} />);
      // 新增分组容器与分组名
      renderNodes.push(
        <ul key={item.group}>
          <li>{item.group}</li>
          <li key={item.id}>{item.item}</li>
        </ul>
      );
      lastGroup = item.group;
      return;
    }
    // 同分组元素追加到当前ul下
    const currentUl = renderNodes.at(-1);
    renderNodes[renderNodes.length - 1] = React.cloneElement(currentUl, {
      children: [...currentUl.props.children, <li key={item.id}>{item.item}</li>]
    });
  });

  return <div>{renderNodes}</div>;
}

方案2：单次遍历分组+轻量渲染（更推荐的React写法） #

虽然你提到不想用嵌套循环，但这个方案的两层遍历总次数和原数组长度完全相等，性能和单次遍历无差异，代码可读性和可维护性更高，不会出现动态操作JSX元素的情况：

import React from 'react';

const arr = {
  itmes: [
    { id: 1, group: "veg", item: "apple" },
    { id: 2, group: "veg", item: "carrot" },
    { id: 3, group: "meat", item: "chicken" },
    { id: 4, group: "meat", item: "steak" }
  ]
};

function App() {
  // 单次遍历完成分组，不修改原数组
  const groupedData = arr.itmes.reduce((acc, cur) => {
    acc[cur.group] ? acc[cur.group].push(cur.item) : acc[cur.group] = [cur.item];
    return acc;
  }, {});

  return (
    <div>
      {Object.entries(groupedData).map(([group, items], idx) => (
        <React.Fragment key={group}>
          {idx > 0 && <hr />}
          <ul>
            <li>{group}</li>
            {items.map(item => <li key={item}>{item}</li>)}
          </ul>
        </React.Fragment>
      ))}
    </div>
  );
}

两种方案都可以实现目标渲染效果，且不需要修改原数组结构。

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