在list component - react js中使用分组数组

import React from 'react';

const data = [
  { id: 1, name: 'Apple', category: 'Fruit' },
  { id: 2, name: 'Banana', category: 'Fruit' },
  { id: 3, name: 'Carrot', category: 'Vegetable' },
  { id: 4, name: 'Tomato', category: 'Vegetable' },
];

const ListComponent = () => {
  // Step 1: 分组数组
  const groupedData = data.reduce((groups, item) => {
    const group = groups[item.category] || [];
    group.push(item);
    groups[item.category] = group;
    return groups;
  }, {});

  // Step 2: 生成分组组件和子组件
  const groupComponents = Object.keys(groupedData).map((category) => (
    <div key={category}>
      <h2>{category}</h2>
      {groupedData[category].map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  ));

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

export default ListComponent;