筛选列表在React中有一次击键延迟

import React, { useState } from 'react';

const FilteredList = () => {
  const [inputValue, setInputValue] = useState('');
  const [filteredData, setFilteredData] = useState([]);

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

    // 清除之前的定时器
    clearTimeout(timer);

    // 设置新的定时器
    const timer = setTimeout(() => {
      // 执行筛选操作
      const filtered = // 筛选逻辑，根据inputValue对数据进行筛选
      setFilteredData(filtered);
    }, 300); // 设置延迟时间，单位为毫秒
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FilteredList;