如何在react.js中链接两个筛选器

import React, { useState } from 'react';

// 筛选器组件
const Filter = ({ options, selectedValue, onFilterChange }) => {
  const handleFilterChange = (event) => {
    const value = event.target.value;
    onFilterChange(value);
  };

  return (
    <select value={selectedValue} onChange={handleFilterChange}>
      <option value="">All</option>
      {options.map((option) => (
        <option key={option} value={option}>{option}</option>
      ))}
    </select>
  );
};

// 父组件
const App = () => {
  const [filter1, setFilter1] = useState('');
  const [filter2, setFilter2] = useState('');

  const data = [
    { name: 'Item 1', category: 'Category A', color: 'Red' },
    { name: 'Item 2', category: 'Category B', color: 'Blue' },
    { name: 'Item 3', category: 'Category A', color: 'Green' },
    // ...
  ];

  const filteredData = data.filter((item) => {
    return (filter1 === '' || item.category === filter1) &&
           (filter2 === '' || item.color === filter2);
  });

  return (
    <div>
      <h1>Filter Example</h1>
      <Filter
        options={['Category A', 'Category B']}
        selectedValue={filter1}
        onFilterChange={setFilter1}
      />
      <Filter
        options={['Red', 'Blue', 'Green']}
        selectedValue={filter2}
        onFilterChange={setFilter2}
      />
      <ul>
        {filteredData.map((item) => (
          <li key={item.name}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;