React搜索场景下如何实现无匹配结果时返回'未找到结果'状态

AI 小北

2026-10-2

实现思路

将过滤逻辑从JSX的链式调用中抽离出来，先拿到过滤后的结果数组，再根据数组长度做分支渲染即可：过滤后数组有值就渲染卡片列表，为空就渲染未找到结果的提示。

优化代码示例

首先在组件渲染逻辑（return语句前）先定义过滤后的结果：

// 抽离过滤逻辑，提前拿到过滤后的列表
const filteredPosters = posters?.filter((value) => {
  // filter回调直接返回布尔值即可，规范度更高
  return search === '' || value.title.toLowerCase().includes(search)
}) || []

再修改你原来的JSX渲染部分：

{posters ? (
  <Card className="list-group">
    {filteredPosters.length > 0 ? (
      // 过滤结果不为空，渲染卡片列表
      filteredPosters.map((poster) => (
        {/* 记得给map遍历的根元素加唯一key，避免React控制台警告，优先用数据id不要用索引 */}
        <MainCard key={poster.id}>
          <HeaderContainer>
            <HeaderCard>
              <Name>{poster.title}</Name>
              <Name style={{
                fontSize: '60px',
                color: '#FF10F0',
                textAlign: 'center'
              }}>{poster.description}</Name>
            </HeaderCard>
          </HeaderContainer>
        </MainCard>
      ))
    ) : (
      // 过滤结果为空，渲染未找到提示
      <div>未找到结果</div>
    )}
  </Card>
) : <Loading />}