如何判断filter与map链式处理的列表为空并展示未找到提示

实现方案 #

你可以先把过滤后的结果提取为独立变量，再通过长度判断走分支渲染逻辑即可，同时建议把用户输入也统一转小写，避免大小写差异导致匹配失效。

示例代码 #

// 第一步：提前做过滤，单独存储过滤结果
const filteredList = list.filter((val) => {
  return val.name.toLocaleLowerCase().includes(input.toLocaleLowerCase())
})

// 第二步：渲染时做分支判断
return (
  <div className="list-container">
    {filteredList.length ? (
      filteredList.map((val, idx) => (
        <Li key={idx} />
      ))
    ) : (
      <p className="empty-tip">{input} 未找到</p>
    )}
  </div>
)

额外优化提示 #

如果你的列表项有唯一标识（比如id字段），建议替换key={idx}为key={val.id}，避免列表顺序变更时出现渲染异常。

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