如何在react钩子中使用复选框过滤获取的数据

import React, { useState, useEffect } from 'react';

const FilteredDataComponent = () => {
  const [originalData, setOriginalData] = useState([]); // 原始数据
  const [filteredData, setFilteredData] = useState([]); // 过滤后的数据
  const [checkboxValues, setCheckboxValues] = useState({
    option1: false,
    option2: false,
    option3: false,
  }); // 复选框值

  useEffect(() => {
    // 模拟异步获取数据
    setTimeout(() => {
      const data = [
        { name: 'John', age: 25, option: 'option1' },
        { name: 'Alice', age: 30, option: 'option2' },
        { name: 'Bob', age: 35, option: 'option3' },
      ];
      setOriginalData(data);
      setFilteredData(data);
    }, 1000);
  }, []);

  useEffect(() => {
    // 复选框值变化时重新过滤数据
    const filtered = originalData.filter(item => {
      return (
        (checkboxValues.option1 && item.option === 'option1') ||
        (checkboxValues.option2 && item.option === 'option2') ||
        (checkboxValues.option3 && item.option === 'option3')
      );
    });
    setFilteredData(filtered);
  }, [checkboxValues]);

  const handleCheckboxChange = e => {
    const { name, checked } = e.target;
    setCheckboxValues(prevState => ({
      ...prevState,
      [name]: checked,
    }));
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          name="option1"
          checked={checkboxValues.option1}
          onChange={handleCheckboxChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="checkbox"
          name="option2"
          checked={checkboxValues.option2}
          onChange={handleCheckboxChange}
        />
        Option 2
      </label>
      <label>
        <input
          type="checkbox"
          name="option3"
          checked={checkboxValues.option3}
          onChange={handleCheckboxChange}
        />
        Option 3
      </label>

      <ul>
        {filteredData.map((item, index) => (
          <li key={index}>
            {item.name} - {item.age}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FilteredDataComponent;