如何为React搜索查询添加Debounce（防抖）功能？

问题分析 #

直接在service层的fetchPhotos异步函数上套用lodash的debounce会导致返回undefined，因为lodash的防抖函数不会直接返回异步操作的结果——它只负责延迟执行目标函数，调用防抖后的函数时无法通过await获取异步返回值。同时原组件在输入时每修改一次searchTerm就触发一次API请求，造成请求频繁。

推荐解决方案：组件层实现防抖 #

将防抖逻辑放在UI层（React组件）中，service层保持纯请求功能，这样职责更清晰，也能避免异步返回值的问题。

完整代码示例

import * as React from "react";
import axios from "axios";
import { debounce } from 'lodash';

// services.js：仅负责纯API请求，不处理防抖
const fetchPhotos = async (query) => {
  const { data } = await axios.get(
    `https://jsonplaceholder.typicode.com/photos?title_like=${query}`
  );
  return data;
};

export default function App() {
  const [photos, setPhotos] = React.useState([]);
  const [searchTerm, setSearchTerm] = React.useState("");

  // 用useRef保存防抖后的函数，确保组件生命周期内始终是同一个实例
  const debouncedFetch = React.useRef(
    debounce(async (query) => {
      const data = await fetchPhotos(query);
      setPhotos(data);
    }, 500) // 500ms防抖间隔，可根据需求调整
  ).current;

  React.useEffect(() => {
    // 搜索词变化时触发防抖请求
    debouncedFetch(searchTerm);

    // 清理函数：组件卸载或搜索词更新时，取消未执行的防抖调用
    return () => debouncedFetch.cancel();
  }, [searchTerm]);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="搜索图片标题..."
      />
      <div>
        {photos?.map((photo) => (
          <div key={photo.id}>{photo.title}</div>
        ))}
      </div>
    </div>
  );
}

关键细节说明

1. 用useRef保存防抖函数：避免组件每次渲染时重新创建新的防抖函数，确保防抖逻辑的一致性。
2. 清理函数取消防抖：防止组件卸载或搜索词快速变化时，之前的延迟请求仍执行，导致不必要的状态更新。
3. service层职责单一：保持fetchPhotos仅处理API请求，符合单一职责原则，方便后续复用和测试。

备选方案：service层实现防抖（不推荐） #

如果必须在service层处理防抖，需要让防抖函数返回Promise，手动封装异步逻辑：

// services.js
import axios from "axios";
import { debounce } from 'lodash';

const fetchPhotos = (query) => {
  return new Promise((resolve) => {
    // 创建防抖后的请求函数
    const debouncedRequest = debounce(async () => {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/photos?title_like=${query}`
      );
      resolve(data);
    }, 500);
    debouncedRequest();
  });
};

组件中调用时，需要增加挂载状态判断，避免组件卸载后更新状态：

// 组件内useEffect部分
React.useEffect(() => {
  let isMounted = true;

  const loadPhotos = async () => {
    const data = await fetchPhotos(searchTerm);
    if (isMounted) setPhotos(data);
  };

  loadPhotos();

  return () => {
    isMounted = false;
  };
}, [searchTerm]);

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