减少reactjs中按类别区分数组的次数

import React, { useState } from 'react';

const data = [
  { id: 1, category: 'A', name: 'Item A1' },
  { id: 2, category: 'A', name: 'Item A2' },
  { id: 3, category: 'B', name: 'Item B1' },
  { id: 4, category: 'B', name: 'Item B2' },
  { id: 5, category: 'C', name: 'Item C1' },
  { id: 6, category: 'C', name: 'Item C2' },
];

const CategoryList = () => {
  const [category, setCategory] = useState(null);

  const handleCategoryChange = (event) => {
    setCategory(event.target.value);
  };

  const filteredData = category ? data.filter(item => item.category === category) : data;

  return (
    <div>
      <select value={category} onChange={handleCategoryChange}>
        <option value="">All</option>
        <option value="A">Category A</option>
        <option value="B">Category B</option>
        <option value="C">Category C</option>
      </select>
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default CategoryList;