如何在react表中只获取经过过滤的数据？

import React, { useState } from 'react';

const TableComponent = () => {
  const [filterValue, setFilterValue] = useState('');

  // 假设原始数据为一个包含对象的数组，每个对象有一个name属性
  const data = [
    { name: 'John' },
    { name: 'Jane' },
    { name: 'Bob' },
    // ...
  ];

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

  // 更新过滤条件的事件处理函数
  const handleFilterChange = event => {
    setFilterValue(event.target.value);
  };

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

export default TableComponent;