React useEffect 异步请求竞态条件怎么避免？

Question

仓乃文 · Accepted Answer

连续触发多次异步请求时，先发出的请求可能后返回，导致显示旧数据覆盖新数据。解决方案有三种：清理函数标记忽略、AbortController 取消请求、请求序列号。

清理函数标记忽略（最简单）：
```javascript
function Search() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

useEffect(() => {
    let ignored = false;  // 标记位
    fetchResults(query).then((data) => {
      if (!ignored) setResults(data);  // 只在未忽略时更新
    });
    return () => { ignored = true; };  // 清理时标记忽略
  }, [query]);

return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}
```

AbortController 取消请求：
```javascript
useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/search?q=${query}`, { signal: controller.signal })
    .then((res) => res.json())
    .then((data) => setResults(data))
    .catch((err) => {
      if (err.name !== "AbortError") throw err;  // 忽略取消错误
    });
  return () => controller.abort();  // 取消上一个请求
}, [query]);
```

补充说明：
- 清理函数标记法最简单，但请求仍会执行完，只是忽略结果
- AbortController 真正取消网络请求，节省带宽
- 两种方案可以组合使用，AbortController 取消请求 + ignored 标记兜底
- React 18+ 的 useEffect 严格模式会执行两次 Effect 来帮助发现竞态问题