当点击一个项目时，React中的过滤列表会瞬间闪现整个列表

import React, { useState } from 'react';

const FilteredList = () => {
  const [filter, setFilter] = useState('');

  // 假设列表数据为一个数组，每个元素包含一个项目的信息
  const listData = [
    { id: 1, name: '项目1' },
    { id: 2, name: '项目2' },
    { id: 3, name: '项目3' },
    // ...
  ];

  // 根据筛选条件对列表数据进行过滤
  const filteredList = listData.filter(item => item.name.includes(filter));

  // 处理点击项目的事件
  const handleClick = (id) => {
    // 处理点击事件的逻辑
    // ...
  };

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={e => setFilter(e.target.value)}
        placeholder="输入筛选条件"
      />
      <ul>
        {filteredList.map(item => (
          <li key={item.id} onClick={() => handleClick(item.id)}>
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FilteredList;