react hooks 实现列表搜索功能，一共三个选择框一个input搜索框四个数据选填 1-4 个 每次操作对数组进行过滤，选择一个或者输入一个就立即过滤显示到页面上。可以给我个小demo吗

当然可以，下面是一个简单的示例代码：

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

const options = [
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 },
  { label: "Option 3", value: 3 },
];

const data = [
  { id: 1, name: "Item 1", option1: 1, option2: 2, option3: 3, option4: 4 },
  { id: 2, name: "Item 2", option1: 2, option2: 3, option3: 4, option4: 1 },
  { id: 3, name: "Item 3", option1: 3, option2: 4, option3: 1, option4: 2 },
  { id: 4, name: "Item 4", option1: 4, option2: 1, option3: 2, option4: 3 },
];

function filterData(data, filters) {
  return data.filter((item) => {
    let match = true;
    for (let key in filters) {
      if (filters[key] && item[key] !== filters[key]) {
        match = false;
        break;
      }
    }
    return match;
  });
}

function List() {
  const [filter, setFilter] = useState({ option1: null, option2: null, option3: null, option4: null, search: "" });
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    setFilteredData(filterData(data, filter));
  }, [filter]);

  const handleOptionChange = (e) => {
    const { name, value } = e.target;
    setFilter((prevFilter) => ({ ...prevFilter, [name]: value }));
  };

  const handleSearchChange = (e) => {
    const { value } = e.target;
    setFilter((prevFilter) => ({ ...prevFilter, search: value }));
  };

  return (
    <div>
      <div>
        <label>Option 1:</label>
        <select name="option1" value={filter.option1} onChange={handleOptionChange}>
          <option value="">All</option>
          {options.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label>Option 2:</label>
        <select name="option2" value={filter.option2} onChange={handleOptionChange}>
          <option value="">All</option>
          {options.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label>Option 3:</label>
        <select name="option3" value={filter.option3} onChange={handleOptionChange}>
          <option value="">All</option>
          {options.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label>Option 4:</label>
        <select name="option4" value={filter.option4} onChange={handleOptionChange}>
          <option value="">All</option>
          {options.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label>Search:</label>
        <input type="text" value={filter.search} onChange={handleSearchChange} />
      </div>
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default List;

在上面的代码中，我们有一个 `List` 组件，它包含四个选择框和一个输入框用于搜索。它使用 `useState` 钩子来管理过滤器和过滤后的数据，并使用 `useEffect` 钩子在过滤器更改时更新过滤后的数据。

`filterData` 函数接受数据和过滤器作为参数，并返回一个过滤后的数组。它使用 `Array.filter` 方法过滤数据，只保留与过滤器匹配的项目。

在组件中，我们使用 `select` 元素和 `input` 元素来处理选择框和搜索框的值，并将它们保存在 `filter` 状态中。我们还使用 `useEffect` 钩子来更新 `filteredData` 状态，每当 `filter` 状态更改时。

最后，我们使用 `filteredData` 渲染列表，并在每个项目上显示项目名称。