如何使用React过滤表格？

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

const Table = () => {
  const [data, setData] = useState([]); // 表格数据
  const [filter, setFilter] = useState(''); // 过滤条件

  useEffect(() => {
    // 模拟异步获取表格数据
    fetchData().then(data => setData(data));
  }, []);

  const handleFilterChange = (event) => {
    setFilter(event.target.value);
  };

  const filteredData = data.filter(item => item.name.includes(filter)); // 根据过滤条件过滤数据

  return (
    <div>
      <input type="text" value={filter} onChange={handleFilterChange} placeholder="输入过滤条件" />
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

// 模拟异步获取表格数据
const fetchData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Alice', age: 30 },
        { id: 3, name: 'Bob', age: 35 },
      ]);
    }, 1000);
  });
};

export default Table;