react 做筛选更新表格数据

因为搜索页面只有一个字段搜索查看，就前端做了一个字段过滤更新表格内容

import React, { useState } from 'react';
import { Table, Input } from 'antd';

const TableFilter = () => {

  const {Search} = Input
  const [originalData, setOriginalData] = useState(/* 从后端获取的原始数据 */);
  const [data, setData] = useState(originalData);
  const [searchText, setSearchText] = useState('');

  const handleSearch = (value) => {
    // 根据搜索名称过滤数据
    const filteredData = originalData.filter(item =>
    // filter 过滤数据要有返回值
     return Object.values(item).some(val =>
        val.toString().toLowerCase().includes(value.toLowerCase())
      )
    );
    //将过滤搜索出来的内容给表格
    setData(filteredData);
  };


  // 表格列配置
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
  ];

  return (
    <div>
      <Search
        placeholder="Search..."
        allowClear
        onSearch={(value) => handleSearch(value)}
        value={searchText}
        onChange={(e) => {
          setSearchText(e.target.value);
          // 在搜索框清空时，恢复原始数据
          if (e.target.value === '') {
            setData(originalData);
          }
        }}
      />

      <Table
        dataSource={data}
        columns={columns}
        pagination={false}
      />
    </div>
  );
};

export default TableFilter;