您如何在 React 中获取数据并避免 race conditions？

Question

Accepted Answer

基本方法使用 `useEffect`，但您必须处理 **cleanup** 和 **乱序响应**，否则会出现过时的数据和警告。

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // cancel the in-flight request when id changes/unmounts
  }, [id]);
}
```

## 为什么这很重要

假设 `id` 快速从 `1` 变为 `2`。如果没有取消，两个请求都在进行中。如果请求 `1` 很慢且在请求 `2` **之后** 解决，您会为用户 `2` 显示用户 `1` 的数据：

```text
fetch(1) ───────────(slow)──────▶ setUser(user1)  ❌ shown last, but wrong
fetch(2) ──(fast)──▶ setUser(user2)
```

中止之前的请求（cleanup）可以解决这个问题。旧的 boolean-flag 模式（`let active = true; ... if (active) setUser(...)`）通过忽略过时的响应来实现相同的目的。

## 在实际应用中，使用库

手动获取是重复的，会错过 caching/retries。**React Query（TanStack Query）** 或 **SWR** 为您处理加载/错误状态、缓存、去重、后台刷新和 stale-while-revalidate：

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

对于 Next.js 等框架，服务器端数据加载器通常更可取。