Kaip React duomenis ir išvengti lenktynių sąlygų?

Question

Accepted Answer

Pagrindinį metodą naudoja `useEffect`, tačiau jūs turite tvarkyti **valymas** ir **ne į eilę ateinančius atsakymus**, arba gausite pasenusias duomenis ir įspėjimus.

```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]);
}
```

## Lenktynių sąlyga, kurią tai prevenčija

Tarkime, `id` greitai pasikeičia iš `1` į `2`. Be atšaukimo, abu prašymai yra skraidoje. Jei prašymas `1` yra lėtas ir išsprendžiamas **po** prašymo `2`, jūs rodytumėte naudotojo `1` duomenis naudotojui `2`:

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

Atšaukus ankstesnį prašymą (valymas) tai išsprendžia. Senesnio boolean vėliavėlės modelio (`let active = true; ... if (active) setUser(...)`) pasiekia tą patį, ignoruodama pasenusią atsakymą.

## Tikruose programose naudokite biblioteką

Rankinis duomenų gavinėjimas tampa pasikartojantis ir praleidžia talpinimą/bandymus iš naujo. **React Query (TanStack Query)** arba **SWR** tvarkytina įkėlimo/klaidos būsenų, talpinimo, deduplikavimo, fono atnaujinimo ir pasenusio-kol-atnaujinama jums:

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

Naudojant tokius karkasus kaip Next.js, serverio šalies duomenų įkėlėjai dažnai yra pageidautini.