react hooks 实现列表搜索功能，第一个select框选择过就过滤数组，第二个select框选择后继续过滤数据，可以给我个小demo吗

好的，下面是一个简单的例子，使用了 `useState` 和 `useEffect` hooks 实现了列表搜索功能。当第一个 select 框选择后，会根据选项筛选出符合条件的数据，然后再根据第二个 select 框选择的条件继续筛选。这里使用了 `filter` 函数来对数据进行筛选。

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

const data = [
  { name: "apple", type: "fruit", color: "red" },
  { name: "banana", type: "fruit", color: "yellow" },
  { name: "carrot", type: "vegetable", color: "orange" },
  { name: "tomato", type: "fruit", color: "red" },
  { name: "broccoli", type: "vegetable", color: "green" }
];

const App = () => {
  const [filteredData, setFilteredData] = useState([]);
  const [selectedType, setSelectedType] = useState("");
  const [selectedColor, setSelectedColor] = useState("");

  useEffect(() => {
    let result = data.filter(item => item.type === selectedType);
    if (selectedColor) {
      result = result.filter(item => item.color === selectedColor);
    }
    setFilteredData(result);
  }, [selectedType, selectedColor]);

  const handleTypeChange = e => {
    setSelectedType(e.target.value);
  };

  const handleColorChange = e => {
    setSelectedColor(e.target.value);
  };

  return (
    <div>
      <div>
        <label htmlFor="type">Type:</label>
        <select id="type" onChange={handleTypeChange}>
          <option value="">All</option>
          <option value="fruit">Fruit</option>
          <option value="vegetable">Vegetable</option>
        </select>
      </div>
      <div>
        <label htmlFor="color">Color:</label>
        <select id="color" onChange={handleColorChange}>
          <option value="">All</option>
          <option value="red">Red</option>
          <option value="yellow">Yellow</option>
          <option value="orange">Orange</option>
          <option value="green">Green</option>
        </select>
      </div>
      <ul>
        {filteredData.map(item => (
          <li key={item.name}>
            {item.name} ({item.type}, {item.color})
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

在这个例子中，我们定义了一个 `data` 数组，然后使用 `useState` 定义了三个状态变量：`filteredData` 用于存储筛选后的数据，`selectedType` 用于存储第一个 select 框选择的值，`selectedColor` 用于存储第二个 select 框选择的值。

在 `useEffect` 中，我们使用 `filter` 函数对数据进行筛选，根据 `selectedType` 和 `selectedColor` 的值来过滤数据，并将筛选后的结果存储到 `filteredData` 状态变量中。

在 render 函数中，我们使用两个 select 框来实现列表搜索功能，并将筛选后的结果渲染到页面上。