React电影搜索页无匹配结果时显示提示的实现方法

算力阿峰

2026-8-28

React电影搜索页无结果空白问题修复

问题现象

基于React开发的电影搜索页面基础功能运行正常，但输入不存在的电影名称发起搜索时，对应内容区域显示空白，该问题由原代码第8行的空数组兜底逻辑导致，需要在无匹配搜索结果时展示No results found提示。

原问题代码

import React from 'react'
import Card from './Card'

const CardList = ({ results }) => {

    let data = [];
    if(results.data) {
        data = results.data.Search || [];
    }


  return (
    <section className='container'>

    <div className='row justify-content-center'> 
        
            {data.map((item) => (
                <Card key={item.imdbID} movie={item}/>
            ))}
        
    </div>
    </section>

  )
}

export default CardList

问题根因

当搜索关键词无匹配结果时，接口返回的results.data.Search字段值为undefined，原代码直接将其兜底为空数组。对空数组执行map遍历不会生成任何可渲染的DOM节点，最终内容区域无任何展示，表现为空白。

修复方案

直接在渲染层增加数组长度判断即可，不需要改动原有数据获取逻辑：

当结果数组长度为0时，渲染无结果提示文本
当存在有效搜索结果时，保持原有遍历渲染Card组件的逻辑不变
原有Card组件的key绑定、props传参逻辑完全保留，不影响正常搜索场景的使用

修复后的完整代码如下：

import React from 'react'
import Card from './Card'

const CardList = ({ results }) => {

    let data = [];
    if(results.data) {
        data = results.data.Search || [];
    }


  return (
    <section className='container'>
      <div className='row justify-content-center'> 
        {data.length === 0 ? (
          <p className="text-center mt-4">No results found</p>
        ) : (
          data.map((item) => (
            <Card key={item.imdbID} movie={item}/>
          ))
        )}
      </div>
    </section>
  )
}

export default CardList