React搜索功能默认显示‘无结果’提示问题解决方案

现有条件判断没有区分三类场景：页面初始加载/搜索框清空状态、接口请求中状态、用户输入搜索词后无匹配结果状态。只要渲染时filteredResults为空就直接展示无结果提示，初始加载阶段接口还未返回数据、APIData为空数组时自然会误触发提示。

方案1：无需新增useState（推荐，无冗余状态） #

你已经定义了isLoading加载状态、error错误状态，加上搜索输入框绑定的关键词state（一般命名为searchKeyword，初始值为空字符串），完全可以基于现有状态覆盖所有判断分支，不需要新增状态变量。

调整步骤 #

• 确认APIData初始值设置为空数组：const [APIData, setAPIData] = useState([])，避免初始值为undefined时调用map方法报错
• 过滤逻辑不需要额外修改：当搜索关键词为空时，post.title.includes('')会对所有数据返回true，过滤结果自然是全量接口数据
• 调整条件渲染的判断优先级，按状态优先级依次渲染，修改后的代码如下：

{isLoading ? (
  <h1>数据加载中...</h1>
) : error ? (
  <h1>数据加载失败，请稍后重试</h1>
) : searchKeyword.trim() === '' ? (
  // 搜索关键词为空，展示全量数据
  APIData.map((post) => (
    <div className="card" key={post._id}>
      <div className="card-content">
        <Link to={`/post/${post._id}`} className="link">
          <h2 className="results-title">{post.title}</h2>
          <ol className="card-username">{post.username}</ol>
        </Link>
      </div>
    </div>
  ))
) : filteredResults.length > 0 ? (
  // 有搜索词且存在匹配结果，展示过滤后的结果
  filteredResults.map((post) => (
    <div className="card" key={post._id}>
      <div className="card-content">
        <Link to={`/post/${post._id}`} className="link">
          <h2 className="results-title">{post.title}</h2>
          <ol className="card-username">{post.username}</ol>
        </Link>
      </div>
    </div>
  ))
) : (
  // 有搜索词但无匹配结果，才展示无结果提示
  <h1>No results found!</h1>
)}

方案2：新增状态变量（仅适配非实时搜索场景） #

如果你的搜索逻辑不是输入实时过滤，而是需要用户主动点击搜索按钮才触发查询，才需要新增状态。新增hasSearched布尔状态：

• 初始值为false
• 用户点击搜索按钮触发查询时，将状态设为true
• 用户清空搜索框时，将状态重置为false
  此时无结果提示的展示条件改为hasSearched && filteredResults.length === 0即可。实时输入搜索的场景下使用该方案属于冗余实现，没有必要。

内容的提问来源于stack exchange，提问作者sultan.h