点击标签无法筛选匹配博客的React代码问题排查

当前代码中搜索框输入内容可正常筛选博客，但点击Google Ads、Facebook Ads等标签时，无法显示匹配标签的博客。相关代码片段如下：

const [query, setQuery] = useState("")
const [isOn, setOn] = useState('google') //默认值
<Input placeholder='Search Articles' onChange={event => setQuery(event.target.value)} />
<Btnn onClick={() => setOn('google')} >Google Ads</Btnn>
<Btnn onClick={() => setOn('facebook')} >Facebook Ads</Btnn>
<Btnn onClick={() => setOn('email')}>Email</Btnn>
...
{allBlogs.filter(b =>
                {
                     if (query === '') {
                      return b;
                    } else if (b.title?.toLowerCase().includes(query.toLowerCase()) ) {
                      return b;
                    }
                    else if (b.title?.toLowerCase().includes(isOn)) {
                        return b
                    }
                  }
              )
              .map((b) => 
                  (...

问题根源 #

你的筛选逻辑存在两个核心问题：

1. 逻辑优先级错误：只要query不为空，就只会执行搜索框的匹配判断，标签筛选的else if分支永远不会触发
2. 大小写不统一：isOn的值是小写（比如'google'），但判断时没有将其转为小写，若博客标题中的标签是大写或混合大小写，会直接导致匹配失败

修复方案 #

调整筛选逻辑，同时统一大小写处理，以下提供两种常见需求的实现：

方案1：搜索框与标签筛选同时生效（需同时满足关键词和标签）

{allBlogs.filter(b => {
  // 统一转换为小写，彻底避免大小写不匹配问题
  const titleLower = b.title?.toLowerCase() || '';
  const queryLower = query.toLowerCase();
  const tagLower = isOn.toLowerCase();

  if (query === '') {
    // 搜索框为空时，仅匹配当前选中的标签
    return titleLower.includes(tagLower);
  } else {
    // 搜索框有内容时，同时匹配搜索关键词和标签
    return titleLower.includes(queryLower) && titleLower.includes(tagLower);
  }
}).map((b) => (...))}

方案2：搜索框优先，空搜索时才用标签筛选（修复原逻辑缺陷）

{allBlogs.filter(b => {
  const titleLower = b.title?.toLowerCase() || '';
  const queryLower = query.toLowerCase();
  const tagLower = isOn.toLowerCase();

  if (query !== '') {
    // 搜索框有内容时，仅匹配搜索关键词
    return titleLower.includes(queryLower);
  } else {
    // 搜索框为空时，匹配当前选中的标签
    return titleLower.includes(tagLower);
  }
}).map((b) => (...))}

额外优化点

原代码中query为空时直接返回所有博客，改成匹配默认标签'google'，这样页面初始化时就会显示对应标签的博客，符合默认值的设计预期。

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