重构搜索栏Filter与Map逻辑，添加无匹配结果展示

首先修复原代码中filter函数的问题：filter的回调需要返回布尔值来决定是否保留元素，而非返回book或空值。再将过滤逻辑与渲染逻辑拆分，方便判断无匹配的情况。

重构后的完整代码 #

return (
  <div>
    <input placeholder="Search Book Title" onChange={handleChange} />
    {(() => {
      // 先计算匹配的书籍列表
      const filteredBooks = bookList.filter(book => {
        if (query === '') {
          return false; // 空查询时不展示任何书籍，和原逻辑一致
        }
        return book.title.toLowerCase().includes(query.toLowerCase());
      });

      // 判断是否有匹配结果
      if (filteredBooks.length === 0) {
        // 查询不为空且无匹配时展示提示
        if (query !== '') {
          return <div>No books matched your search.</div>;
        }
        // 空查询时返回null，不展示内容
        return null;
      }

      // 有匹配结果时渲染书籍列表
      return filteredBooks.map((book, index) => (
        <div key={index}>           
          {book.title} {/* 替换成你需要展示的书籍内容 */}
        </div>
      ));
    })()}
  </div>
);

关键优化点 #

• 拆分过滤与渲染逻辑：将filteredBooks单独计算，避免JSX中嵌套复杂逻辑，也便于判断列表是否为空。
• 修复filter逻辑：明确返回布尔值，空查询时返回false（不保留任何元素），匹配时返回true。
• 添加无匹配提示：当查询不为空且过滤后列表为空时，展示提示文本。
• 补充key属性：map渲染列表时必须添加唯一key，这里用index作为临时方案，推荐使用书籍的唯一ID（如book.id）。

可选调整：空查询时展示全部书籍 #

如果希望空查询时展示所有书籍，修改filter中的空查询判断即可：

const filteredBooks = bookList.filter(book => {
  if (query === '') {
    return true; // 空查询时保留所有书籍
  }
  return book.title.toLowerCase().includes(query.toLowerCase());
});

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