React Typeahead并发请求/竞态问题的有效解决方案咨询

你遇到的退格后显示旧请求结果的问题，核心是异步API请求的竞态条件——旧请求的响应晚于新请求返回，导致错误覆盖了最新的状态。下面是几种有效解决方法：

方案一：使用AbortController取消旧请求 #

这是最彻底的解决方案，直接终止未完成的API请求，从根源上避免旧结果干扰状态。

修改组件代码如下：

import React, { useEffect, useState } from "react";
import { fetchSuggestions } from "./API";

export default function Typeahead() {
  const [searchQuery, setSearchQuery] = useState("");
  const [results, setResults] = useState([]);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function getResults() {
      if (!searchQuery) {
        setResults([]);
        return;
      }
      try {
        const result = await fetchSuggestions(searchQuery, signal);
        setResults(result);
      } catch (error) {
        // 忽略请求被取消的错误
        if (error.name !== "AbortError") {
          console.error("请求失败:", error);
        }
      }
    }

    getResults();

    // 组件卸载或搜索词变化时，取消当前未完成的请求
    return () => controller.abort();
  }, [searchQuery]);

  function inputHandler(e) {
    const query = e.target.value;
    setSearchQuery(query);
  }

  return (
    <div className="container">
      <input onChange={inputHandler} value={searchQuery} />
      <div>
        <ul className="list-container">
          {results.map((res) => (
            <li key={res}>{res}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

同时需要更新fetchSuggestions函数，接收并传递signal参数：

// API.js
export async function fetchSuggestions(query, signal) {
  // 模拟API延迟（实际项目替换为真实请求）
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000));
  
  // 真实请求示例：
  // return fetch(`https://your-api-url/suggestions?q=${query}`, { signal })
  //   .then(res => res.json());

  // 保持原模拟逻辑，同时检查请求是否被中止
  if (signal.aborted) throw new Error("AbortError");
  return ["result1", "result2", "result3"].filter(item => item.includes(query));
}

方案二：用请求标识过滤旧结果 #

如果无法修改API请求逻辑（比如使用不支持AbortController的第三方库），可以通过跟踪请求ID来过滤旧结果。

代码示例：

import React, { useEffect, useState, useRef } from "react";
import { fetchSuggestions } from "./API";

export default function Typeahead() {
  const [searchQuery, setSearchQuery] = useState("");
  const [results, setResults] = useState([]);
  const latestRequestId = useRef(0);

  useEffect(() => {
    if (!searchQuery) {
      setResults([]);
      return;
    }
    // 生成递增的请求ID
    const requestId = ++latestRequestId.current;

    async function getResults() {
      const result = await fetchSuggestions(searchQuery);
      // 只有当前请求是最新的，才更新状态
      if (requestId === latestRequestId.current) {
        setResults(result);
      }
    }

    getResults();
  }, [searchQuery]);

  function inputHandler(e) {
    const query = e.target.value;
    setSearchQuery(query);
  }

  return (
    <div className="container">
      <input onChange={inputHandler} value={searchQuery} />
      <div>
        <ul className="list-container">
          {results.map((res) => (
            <li key={res}>{res}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

方案三：防抖优化（辅助方案） #

防抖不能直接解决竞态问题，但可以减少不必要的API请求，间接降低竞态发生的概率，同时提升组件性能。

结合防抖的示例：

import React, { useEffect, useState, useCallback } from "react";
import { fetchSuggestions } from "./API";

// 防抖工具函数
function debounce(func, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

export default function Typeahead() {
  const [searchQuery, setSearchQuery] = useState("");
  const [results, setResults] = useState([]);

  // 创建防抖后的请求函数
  const debouncedGetResults = useCallback(debounce(async (query) => {
    if (!query) {
      setResults([]);
      return;
    }
    const result = await fetchSuggestions(query);
    // 再次确认搜索词是否匹配当前状态
    if (query === searchQuery) {
      setResults(result);
    }
  }, 300), [searchQuery]);

  useEffect(() => {
    debouncedGetResults(searchQuery);
  }, [searchQuery, debouncedGetResults]);

  function inputHandler(e) {
    const query = e.target.value;
    setSearchQuery(query);
  }

  return (
    <div className="container">
      <input onChange={inputHandler} value={searchQuery} />
      <div>
        <ul className="list-container">
          {results.map((res) => (
            <li key={res}>{res}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

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