ReactJS餐厅菜单应用搜索功能实现问题求助

AI 小北

2026-8-5

React餐厅菜单搜索功能修复方案

问题根源

你的搜索功能失效主要有两个原因：

search状态未初始化默认值，初始为undefined，调用search.toLowerCase()时会触发类型错误，导致过滤逻辑中断。
未处理搜索框为空的场景，此时应该返回全部菜品，但当前逻辑会尝试匹配undefined，导致无结果。

修复步骤

1. 初始化搜索状态为空白字符串

修改状态声明，确保初始值是字符串类型：

const [search, setSearch] = useState("");

2. 优化过滤逻辑

更新渲染代码中的过滤逻辑，先判断搜索内容是否为空，为空则返回所有菜品，否则执行不区分大小写的匹配：

{filteredData
  .filter(item => {
    // 搜索框为空时返回所有菜品
    if (!search.trim()) return true;
    // 不区分大小写匹配菜品名称
    return item.Name.toLowerCase().includes(search.trim().toLowerCase());
  })
  .map(item => (
    <div key={item.id}>
      <div className='items'>
        <ul>
          <li className={item.Type === 'veg' ? 'veg' : 'non-veg'}></li>
          <li>{item.Name}</li>
          <li>₹ {item.Price}</li>
          <img src='/images/pizza1.jpg' alt={item.Name} />
          <div className='hr'></div>
        </ul>
      </div>
    </div>
  ))
}