根据react中的用户输入过滤表格结果

import React, { useState } from 'react';

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
  // 更多数据...
];

function App() {
  const [inputValue, setInputValue] = useState('');
  const [filteredData, setFilteredData] = useState(data);

  const handleInputChange = (event) => {
    const value = event.target.value;
    setInputValue(value);

    const filtered = data.filter(item =>
      item.name.toLowerCase().includes(value.toLowerCase())
    );
    setFilteredData(filtered);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Filter by name"
        value={inputValue}
        onChange={handleInputChange}
      />
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map(item => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

const handleInputChange = (event) => {
  const value = event.target.value;
  setInputValue(value);

  const filtered = data.filter(item =>
    item.name.toLowerCase().includes(value.toLowerCase())
  );
  setFilteredData(filtered);
};

import { useCallback } from 'react';
import { debounce } from 'lodash';

const handleInputChange = useCallback(
  debounce((value) => {
    const filtered = data.filter(item =>
      item.name.toLowerCase().includes(value.toLowerCase())
    );
    setFilteredData(filtered);
  }, 300),
  []
);

const handleChange = (event) => {
  const value = event.target.value;
  setInputValue(value);
  handleInputChange(value);
};