React实现非实时搜索：输入内容后触发对应数据请求

你现在是先拉全量数据再前端过滤，要改成根据搜索词动态请求，按下面步骤改就行：

核心调整方向 #

• 搜索框为空时，请求全量数据接口
• 输入内容后，请求带搜索参数的接口，让后端返回过滤好的数据
• 去掉前端的filter逻辑，直接渲染后端返回的结果

修改后的完整代码示例 #

import { useState } from 'react';

// 让useFetch根据search值动态切换请求地址，并且监听search变化重新请求
const { data, loading, error } = useFetch(
  search ? `${BASE_URL}?search=${encodeURIComponent(search)}` : BASE_URL,
  [search] // 把search作为依赖，值变了就重新请求
);

const [search, setSearch] = useState("");

const handleChange = (e) => {
  setSearch(e.target.value);
};

if (loading) return <h1>LOADING...</h1>;
if (error) return <div>加载数据出错了</div>; // 把console.log改成页面提示更友好

return (
  <div className="App" >
    <div className="Container">
      <label className='header'>Topic</label>
      <div className="Container-searchBar">
        <input 
          type="text" 
          value={search} 
          placeholder="Search . . ." 
          onChange={handleChange}
        />
      </div>
      {/* 直接map后端返回的数据，不用再前端filter */}
      {data?.map((post) => {
        // 这里替换成你原来的渲染逻辑
        return <div key={post.id}>{post.title} - {post.tags.join(', ')}</div>;
      })}
    </div>
  </div>
);

关键细节说明 #

1. 动态拼接请求URL：
   • 当search为空时，用原BASE_URL请求全量数据
   • 有搜索内容时，拼接?search=xxx参数（用encodeURIComponent处理空格、特殊字符，避免URL解析错误）
2. useFetch的依赖项：
   把search加入useFetch的依赖数组，确保每次search变化时，hook会重新发起请求。如果你的useFetch自定义hook不支持依赖参数，就得改成用useEffect手动触发请求：

   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       try {
         const url = search ? `${BASE_URL}?search=${encodeURIComponent(search)}` : BASE_URL;
         const res = await fetch(url);
         const result = await res.json();
         setData(result);
       } catch (err) {
         setError(err);
       } finally {
         setLoading(false);
       }
     };
     fetchData();
   }, [search]); // 依赖search，值变就执行
   

3. 移除前端filter：
   后端已经返回符合搜索条件的数据，直接用map渲染就行，不用再做前端过滤了
4. 清理冗余代码：
   原来的inp state没用到，直接删掉就行

新手额外提示 #

• 先确认后端接口支持?search=xxx这种参数，能根据传入的搜索词过滤tags字段返回对应数据
• 可以加个输入防抖，避免用户快速输入时频繁发请求：

  const handleChange = (e) => {
    clearTimeout(window.debounceTimer);
    window.debounceTimer = setTimeout(() => {
      setSearch(e.target.value);
    }, 300); // 300毫秒后再更新search，减少请求次数
  };
  

• 错误处理别只打console，给用户显示个提示会更友好

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