搜索栏无法过滤，出现Uncaught TypeError错误的解决求助

第一个错误：Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase') #

说白了就是你在调用toLowerCase()时，前面的属性值是undefined，大概率是这两个情况：

• 你的mock API返回的图书数据里，有的对象缺了你要过滤的字段（比如title或者author），或者你遍历的根本不是有效的图书对象。给属性加个可选链就能避免报错：

  // 原错误代码示例
  books.filter(book => book.title.toLowerCase().includes(searchVal))
  // 改成这样，哪怕title不存在也不会崩
  books.filter(book => book?.title?.toLowerCase().includes(searchVal.toLowerCase()))
  

• 检查你获取搜索输入值的代码，比如是不是把搜索框的id写错了，导致document.getElementById('search-input')拿到的是null，再取.value就会出问题。

第二个错误：Cannot read properties of undefined (reading 'classList') #

把监听移到fetch回调后出这个错，说明你操作classList的那个DOM元素根本找不到，是空的：

• 先检查你选DOM元素的选择器对不对，比如document.querySelectorAll('.book-card')是不是真的能拿到已渲染的图书卡片。如果fetch回调执行时，卡片还没渲染到页面上，自然找不到，所以要把渲染卡片的代码写完之后，再绑定事件监听。
• 遍历DOM元素的时候加个判断，别直接操作：

  const bookCards = document.querySelectorAll('.book-card');
  bookCards.forEach(card => {
    if (!card) return; // 空元素直接跳过
    // 这里再操作card.classList
  })
  

现成搜索栏组件选项 #

不想自己折腾的话，这些方案可以直接用：

• Bootstrap Input Group：现成的搜索框+按钮组合，直接套HTML结构就行，样式和基础交互都做好了。
• 框架组件库：如果之后会用Vue或React，Element UI、Ant Design里的搜索组件功能很全，防抖、清空、搜索联想这些都自带。
• 自己封装轻量组件：其实搜索栏核心就是监听输入（加个防抖优化性能）、过滤数据、更新DOM，逻辑不复杂，写一次之后可以复用在其他项目里。

内容的提问来源于stack exchange，提问作者Shima Masaeli