react hooks + TS实现列表搜索功能，一个输入框三个选择框，选择或输入一项就过滤一次数组并显示到页面上。可以写一个小demo吗？

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

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

interface IData {
  id: number;
  name: string;
  category: string;
  price: number;
}

const data: IData[] = [
  { id: 1, name: 'Apple', category: 'Fruit', price: 5 },
  { id: 2, name: 'Banana', category: 'Fruit', price: 3 },
  { id: 3, name: 'Orange', category: 'Fruit', price: 4 },
  { id: 4, name: 'Carrot', category: 'Vegetable', price: 2 },
  { id: 5, name: 'Broccoli', category: 'Vegetable', price: 3 },
];

const App: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState<string>('');
  const [category, setCategory] = useState<string>('');
  const [price, setPrice] = useState<number | undefined>(undefined);

  const filteredData = useMemo(() => {
    let result = data;

    if (searchTerm) {
      result = result.filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
    }

    if (category) {
      result = result.filter(item => item.category === category);
    }

    if (price !== undefined) {
      result = result.filter(item => item.price <= price);
    }

    return result;
  }, [searchTerm, category, price]);

  return (
    <div>
      <div>
        <input type="text" placeholder="Search" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />
      </div>
      <div>
        <select value={category} onChange={e => setCategory(e.target.value)}>
          <option value="">All Categories</option>
          <option value="Fruit">Fruit</option>
          <option value="Vegetable">Vegetable</option>
        </select>
      </div>
      <div>
        <input type="number" placeholder="Max Price" value={price !== undefined ? price : ''} onChange={e => setPrice(Number(e.target.value) || undefined)} />
      </div>
      <div>
        {filteredData.map(item => (
          <div key={item.id}>
            <span>{item.name}</span>
            <span>{item.category}</span>
            <span>{item.price}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;

在这个示例中，我们使用了三个状态变量：`searchTerm`、`category` 和 `price`，它们分别代表搜索关键词、选择的类别和选择的最大价格。我们使用 `useState` 钩子来定义它们，并在页面上显示输入框和选择框。

我们还定义了一个 `data` 数组，它包含了一些商品数据。我们使用 `useMemo` 钩子来计算筛选后的商品数据。每当 `searchTerm`、`category` 或 `price` 发生变化时，我们重新计算筛选后的数据，并将其渲染到页面上。

我们在页面上使用了一个简单的 `map` 函数来遍历筛选后的数据，并将每个商品的名称、类别和价格显示到页面上。

这是一个非常简单的示例，你可以根据自己的需要进行扩展。