JS的map函数中公告分类筛选时如何避免同时返回匹配结果与无公告提示

云原生阿岚

2026-10-3

问题原因

你现在的写法逻辑错误是把「单条公告不匹配」的判断放到了遍历的每一次循环里，只要遍历到第一个不匹配的公告，就会直接返回无公告提示，不管后续有没有匹配的内容，自然会出现匹配内容和提示同时展示的问题。

修复方案

把「全局筛选匹配公告」和「渲染内容/空提示」的逻辑拆分，不要在map遍历单条的逻辑里做全局无匹配的判断：

首先提前过滤出所有符合筛选条件的公告列表
根据过滤后的列表长度判断是渲染公告列表还是空提示

参考代码

// 第一步：提前过滤符合条件的公告
const targetFilterType = props.filter?.announcement?.toUpperCase()
const filteredAnnouncements = targetFilterType 
  ? announcements.filter(item => {
      const itemType = item.taxonomy?.toUpperCase()
      return itemType === targetFilterType
    })
  : announcements // 无筛选条件时返回全部公告

// 第二步：渲染逻辑
{
  filteredAnnouncements.length ? (
    // 有匹配公告，正常遍历渲染
    filteredAnnouncements.map((item, index) => {
      // 这里放你原本单条公告的渲染逻辑，示例如下：
      return <div key={index} className="announcement-item">{item.content}</div>
    })
  ) : targetFilterType ? (
    // 存在筛选条件且无匹配，才显示无公告提示
    <p className="text-xs">No announcements</p>
  ) : null
}