基于选择下拉列表值的对象的React filter数组

import React, { useState } 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 FilteredList = () => {
  const [selectedValue, setSelectedValue] = useState('all');
  const filteredData = data.filter(item => {
    if (selectedValue === 'all') {
      return true;
    } else {
      return item.category === selectedValue;
    }
  });

  return (
    <div>
      <select value={selectedValue} onChange={e => setSelectedValue(e.target.value)}>
        <option value="all">All</option>
        <option value="fruit">Fruit</option>
        <option value="vegetable">Vegetable</option>
      </select>
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FilteredList;