如何解决React搜索栏异步请求竞态条件导致的旧数据覆盖

搜索栏出现“显示错误结果”的情况，本质上是异步请求的竞态条件所致。本文将拆解背后的机制，并提供一个可落地的解决方案。

在 React 应用中实现搜索栏图片加载时，一个常见但容易被忽视的问题是：多个并发异步请求未经控制，导致后发起的请求先返回并更新状态，而先发起但响应较慢的请求后返回，反而错误地覆盖了正确结果。这就是“竞态条件”（Race Condition）。你提到的输入“test11”却显示“test1”的 11 张图，正是其典型表现。

追根溯源，问题的关键在两方面：原始代码中 fetch() 函数被直接调用，既未做请求取消也未处理防重入；同时，useEffect 的依赖项缺失，导致 fetch 函数在组件重渲染时可能捕获过期的 songs 值，进一步加剧状态错乱。

正确解法：useCallback + 依赖收敛 + 请求级防竞态

首先，将 Fetch 函数定义为带稳定引用的回调，并严格声明其依赖项：

const [images, setImages] = useState([]);
const fetchImages = useCallback(async () => {
  try {
    const fetched = await FetchImages({ songs, token, removeToken, setUserError });
    setImages(fetched);
  } catch (err) {
    console.error("Image fetch failed:", err);
  }
}, [songs, token, removeToken, setUserError]); //  所有闭包变量必须显式声明
useEffect(() => {
  fetchImages();
}, [fetchImages]); //  依赖稳定函数，避免无限循环

但这仅是基础优化，并非解决竞态问题的终极方案。真正健壮的做法需引入 AbortController 或 请求取消标识。以下是推荐的增强版 FetchImages 实现：

async function FetchImages({
  songs,
  token,
  removeToken,
  setUserError,
  signal // 新增 AbortSignal 参数
}: {
  songs: { id: string }[];
  token: string;
  removeToken: () => void;
  setUserError: (msg: string) => void;
  signal: AbortSignal; // 支持中断
}) {
  const images: { key: number; Url: string }[] = [];
  for (let i = 0; i < songs.length; i++) {
    if (signal?.aborted) {
      throw new Error("Fetch aborted due to new search");
    }
    const response = await FetchImage({
      id: songs[i].id,
      token,
      removeToken,
      setUserError,
      signal // 向下透传
    });
    images.push({ key: i, Url: response });
  }
  return images
    .sort((a, b) => a.key - b.key) //  更简洁的数值排序写法
    .map(obj => obj.Url);
}

对应地，FetchImage 也需要同步更新以支持中断：

const FetchImage = async ({
  id,
  token,
  removeToken,
  setUserError,
  signal
}: {
  id: string;
  token: string;
  removeToken: () => void;
  setUserError: (msg: string) => void;
  signal?: AbortSignal;
}) => {
  try {
    const response = await fetch(`/api/artist/${id}/cover`, {
      method: "GET",
      headers: {
        "Content-Type": "blob",
        Authorization: `Bearer ${token}`
      },
      signal //  关键：传递 signal 实现请求中断
    });
    if (!response.ok) {
      if (response.status === 401) {
        LogMeOut({ removeToken });
        setUserError("You have been logged out");
      }
      throw new Error(`HTTP ${response.status}`);
    }
    const blob = await response.blob();
    return URL.createObjectURL(blob);
  } catch (error) {
    if (error instanceof DOMException && error.name === "AbortError") {
      // 被主动取消，静默处理
      return "";
    }
    throw error;
  }
};

最后，在搜索触发逻辑中（如 onChange 或 onSubmit），每次新搜索前需创建一个全新的 AbortController：

const [controller, setController] = useState(null);
const handleSearch = async () => {
  // 取消上一次请求
  controller.abort();
  const newController = new AbortController();
  setController(newController);
  try {
    const fetched = await FetchImages({
      songs,
      token,
      removeToken,
      setUserError,
      signal: newController.signal
    });
    setImages(fetched);
  } catch (err) {
    if (err.name !== "AbortError") {
      console.error("Search failed:", err);
    }
  }
};

注意事项与最佳实践

• 避免在循环中无节制 await 多个独立请求：上述串行方式性能较差（N 次网络往返）。生产环境建议改用 Promise.allSettled() 进行并行请求，但需注意服务端限流和 CORS 配置。
• useState 更新是异步的，但不能依赖其判断竞态：切勿在 setImages 之后立即读取 images 来判断请求是否过期。
• useCallback 的依赖数组必须完整：若漏掉 songs 等变量，闭包将捕获旧值，搜索永远基于初始数据。
• 清理副作用：组件卸载时若请求仍在进行，AbortController 可防止内存泄漏，并避免状态更新时报错。

经过上述改造，搜索栏即可实现“所搜即所得”——无论用户手速多快、连续输入多少次，最终展示的始终是最后一次有效请求的结果。