在React中执行搜索后如何正确显示「未找到记录」提示

• 重复出现20条「未找到记录」的核心原因：你将空提示的判断逻辑写在了员工列表的遍历循环体内，每一条不匹配搜索条件的员工数据都会触发一次提示渲染，最终不匹配的条目有多少，就会出现多少条重复提示
• 完全不展示提示的核心原因：空状态判断的触发条件错误，通常是误将「原始员工列表是否为空」作为判断依据，而非「经过搜索过滤后的匹配结果列表是否为空」

1. 先独立处理搜索过滤逻辑，单独维护匹配结果数组

// 搜索逻辑单独抽离，不要和渲染逻辑耦合
const filteredList = employees.filter(item => {
  // 需要大小写不敏感匹配可自行加toLowerCase()处理
  return item.name.includes(searchKey.trim())
})
// 关键词为空时展示全量列表的可选处理逻辑
// const filteredList = searchKey.trim() === '' ? employees : employees.filter(...)

2. 空提示和列表渲染做外层互斥判断，不要放在循环内部

{
  filteredList.length ? (
    // 匹配到结果时渲染列表
    <div className="employee-list">
      {filteredList.map(emp => (
        <div key={emp.id} className="employee-item">{emp.name}</div>
      ))}
    </div>
  ) : (
    // 无匹配结果时只渲染一次提示
    <div className="empty-tip">未找到记录</div>
  )
}

• 不要修改原始员工数组做过滤，单独维护过滤后的结果变量可避免影响其他依赖原始列表的功能
• 若需要保留列表占位布局，仅替换空内容，可调整判断逻辑的位置，将空提示放在列表容器内部即可
• 关键词前后空格建议先做trim处理，避免用户误输入空格导致匹配失效

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