带有复选框和输入react的过滤器数组

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

const FilterableData = ({ data }) => {
  const [filters, setFilters] = useState([]);

  // 模拟异步获取过滤器数组的数据
  useEffect(() => {
    const fetchFilters = async () => {
      // 调用API获取过滤器数组的数据
      const response = await fetch('https://api.example.com/filters');
      const data = await response.json();
      setFilters(data);
    };

    fetchFilters();
  }, []);

  const handleFilterChange = (filterName, newValue) => {
    setFilters(prevFilters => {
      // 更新过滤器数组中对应过滤器的值
      return prevFilters.map(filter => {
        if (filter.name === filterName) {
          return { ...filter, value: newValue };
        }
        return filter;
      });
    });
  };

  const filteredData = data.filter(item => {
    // 根据过滤器数组中的值筛选数据
    return filters.every(filter => {
      if (filter.active) {
        if (filter.type === 'checkbox') {
          // 复选框类型的过滤器
          return filter.value.includes(item[filter.name]);
        } else if (filter.type === 'input') {
          // 输入框类型的过滤器
          return item[filter.name].toLowerCase().includes(filter.value.toLowerCase());
        }
      }
      return true; // 过滤器未激活时，默认返回true，不过滤数据
    });
  });

  return (
    <div>
      {/* 根据过滤器数组渲染筛选器界面 */}
      {filters.map(filter => (
        <div key={filter.name}>
          <label>
            {filter.name}:
            {filter.type === 'checkbox' ? (
              <select
                multiple
                value={filter.value}
                onChange={e => handleFilterChange(filter.name, Array.from(e.target.selectedOptions, option => option.value))}
              >
                {/* 渲染复选框选项 */}
                {Array.from(new Set(data.map(item => item[filter.name]))).map(value => (
                  <option key={value} value={value}>{value}</option>
                ))}
              </select>
            ) : (
              <input
                type="text"
                value={filter.value}
                onChange={e => handleFilterChange(filter.name, e.target.value)}
              />
            )}
          </label>
        </div>
      ))}

      {/* 展示经过筛选后的数据 */}
      {filteredData.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default FilterableData;