React中搜索值不匹配Data.json时如何显示“No Result Found”

先梳理下需求：当搜索框输入内容和Data.json里的title不匹配时，页面显示“No Result Found”。我们可以通过以下几步修改代码来实现：

1. 优化过滤逻辑，避免重复计算 #

原代码里的filter存在重复判断，还有错误逻辑（val是对象，不能直接调用toLowerCase()）。先把过滤后的结果提取成变量，既方便后续渲染，也能用来判断是否有匹配结果。

2. 添加无结果的显示逻辑 #

当过滤后的结果数组长度为0时，渲染“No Result Found”提示。

修改后的完整代码如下：

import { useState } from 'react'; // 原代码漏了导入useState，必须补上
import data from './Data.json';

export const SearchPage = () => {
  const [searchValue, setSearchValue] = useState('');

  function handleChange(event) {
    setSearchValue(event.target.value);
  }

  // 提取过滤后的结果到变量，简化判断逻辑
  const filteredData = data.filter(val => 
    val.title.toLowerCase().includes(searchValue.toLowerCase())
  );

  return (
    <>
      {/* 阻止表单默认提交刷新行为 */}
      <form onSubmit={(e) => e.preventDefault()}>
        <input 
          type="text" 
          name="search" 
          value={searchValue} 
          placeholder="Search something.." 
          onChange={handleChange}
        />
        <button type="submit">Search</button>
      </form>
      <div className="dropdown">
        {filteredData.length > 0 ? (
          filteredData.map((val) => (
            <div className={val.css} key={val.title}> {/* 原数据无id，用唯一的title当key */}
              <button className='button_css'>{val.title}</button>
            </div>
          ))
        ) : (
          <p>No Result Found</p> {/* 无匹配时显示的提示 */}
        )}
      </div>
    </>
  );
}

关键修改点说明： #

• 补全useState导入：原代码使用了useState但未导入，会导致运行报错。
• 简化过滤逻辑：统一转小写实现大小写不敏感搜索，去掉冗余且错误的判断分支。
• 提取filteredData变量：避免在JSX中重复执行filter，提升性能同时方便判断结果长度。
• 条件渲染提示：通过filteredData.length > 0判断，有结果渲染列表，无结果显示提示文本。
• 修正key值：原Data.json没有id字段，用唯一的title作为key更稳妥。
• 阻止表单默认行为：添加onSubmit事件阻止页面刷新，避免搜索后重置输入框。

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