博客搜索栏无法显示过滤结果问题求助（附React代码）

你的代码存在几个关键问题导致搜索过滤不生效，下面逐一说明并给出修复方案：

1. 核心语法错误：filteredItems定义错误 #

你试图用类似useMemo的方式计算过滤结果，但遗漏了React.useMemo钩子调用，反而用了立即执行函数加逗号数组的错误写法，这会让filteredItems实际被赋值为[recentBlogs, query]这个数组，完全不是你想要的过滤后博客列表。

2. 过滤逻辑颠倒且冗余 #

当前代码仅在查询为空时执行过滤，而空字符串的includes判断对任何字符串都返回true，直接返回recentBlogs即可；当输入查询内容时，函数没有返回值，过滤逻辑完全失效。

3. 未使用过滤结果渲染主博客列表 #

页面上的.bloglist区域渲染的是原始recentBlogs数组，而非过滤后的filteredItems，所以即使过滤逻辑正确，用户也看不到过滤后的博客内容。

修复后的完整代码 #

import { useState, useMemo } from 'react';
import { Link } from 'react-router-dom'; // 确保已导入Link组件

const RecentBlogs = ({ recentBlogs }) => {
  const [query, setQuery] = useState("");

  // 使用useMemo缓存过滤结果，依赖项变化时才重新计算
  const filteredItems = useMemo(() => {
    const lowerQuery = query.toLowerCase().trim();
    // 查询为空时返回全部博客，否则过滤标题匹配的内容
    return lowerQuery 
      ? recentBlogs.filter(item => item.title.toLowerCase().includes(lowerQuery))
      : recentBlogs;
  }, [recentBlogs, query]);

  return ( 
    <div className="recent-blogs">
      <h2 className="recent"> Recent Blogs</h2>
      <div className="bloglist">
        {/* 渲染过滤后的博客列表 */}
        {filteredItems.map((blog) => (
          <div className="blog-preview" key={blog.id}>
            <Link to={`/blogs/${blog.id}`}> 
              <h2>{blog.title}</h2>
              <h3>{blog.author}:</h3>
              <p>{blog.desc}</p>
            </Link>
          </div>   
        ))}
      </div>

      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        type="search" 
        placeholder="Search" 
        className="search-bar"
      />
      <h3>Items: </h3>
      {/* 渲染过滤后的标题列表，添加key避免React警告 */}
      {filteredItems.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

额外说明 #

• 加入useMemo是性能优化的实践，避免每次渲染重复执行过滤逻辑；如果是新手入门，也可以直接去掉useMemo，将过滤逻辑直接写在渲染代码中。
• 使用trim()处理查询内容，避免用户输入空格时误判为有效查询。
• 给所有列表项添加了key属性，符合React列表渲染的规范，避免控制台警告。

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