เงื่อนไขการแข่งขันและการล้างข้อมูลของเอฟเฟกต์

ยินดีต้อนรับ

ภาวะการแข่งขันคืออะไร

ข้อผิดพลาด: การตอบกลับจากการดึงข้อมูลที่เก่า

useEffect(() => {
  fetch('/api/item/' + id)
    .then(r => r.json())
    .then(data => setData(data)); // may run AFTER a newer fetch!
}, [id]);

การแก้ไขที่ 1: แฟล็ก `ignore`

useEffect(() => {
  let ignore = false;
  fetch('/api/item/' + id)
    .then(r => r.json())
    .then(data => { if (!ignore) setData(data); });
  return () => { ignore = true; };
}, [id]);

การแก้ไขที่ 2: AbortController

useEffect(() => {
  const controller = new AbortController();
  fetch('/api/item/' + id, { signal: controller.signal })
    .then(r => r.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name === 'AbortError') return; // expected
      setError(err.message);
    });
  return () => controller.abort();
}, [id]);

AbortController กับ async/await

useEffect(() => {
  const ctrl = new AbortController();
  async function load() {
    try {
      const res = await fetch('/api/' + id, { signal: ctrl.signal });
      const json = await res.json();
      setData(json);
    } catch (e) {
      if (e.name !== 'AbortError') setError(e.message);
    }
  }
  load();
  return () => ctrl.abort();
}, [id]);

ต้องล้างข้อมูลเสมอ

ข้อควรระวังเกี่ยวกับอะซิงโครนัสของ useEffect

useEffect(() => {
  // useEffect callback is NOT async
  async function fetchData() { /* ... */ }
  fetchData(); // call it
  return () => ctrl.abort();
}, [id]);

ไลบรารีจัดการเรื่องนี้ให้คุณ

การทดสอบภาวะการแข่งขัน

ตรวจสอบความเข้าใจ

สรุป

บทถัดไป