การแก้ไขข้อผิดพลาด React ที่พบบ่อย

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

คำเตือนเกี่ยวกับคีย์ที่หายไป

// Bad
items.map(item => <li>{item.name}</li>)

// Good
items.map(item => <li key={item.id}>{item.name}</li>)

ไม่สามารถอ่านคุณสมบัติของค่าที่ไม่ได้กำหนด

// Bad — crashes if data is undefined
const [data, setData] = useState();
return <p>{data.name}</p>;

// Good
const [data, setData] = useState(null);
return data ? <p>{data.name}</p> : <p>Loading...</p>;

ข้อผิดพลาดจากการ render ใหม่มากเกินไป

// Bad — setState called on every render
function Counter() {
  const [n, setN] = useState(0);
  setN(n + 1); // infinite loop!
  return <p>{n}</p>;
}

แก้ไขการ render ใหม่มากเกินไป

// Good — update only on click
function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

คำเตือนความไม่ตรงกันของการเติมข้อมูล

แก้ไขความไม่ตรงกันของการเติมข้อมูล

const [ts, setTs] = useState('');
useEffect(() => {
  setTs(Date.now().toString());
}, []);
return <p>{ts}</p>;

สถานะไม่อัปเดตทันที

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // still old value!
}

useEffect(() => {
  console.log('updated:', count); // correct
}, [count]);

คอมโพเนนต์ไม่อัปเดตเมื่อพร็อพส์เปลี่ยน

// Bad — same reference, no re-render
const list = [];
list.push('item');
setList(list);

// Good — new array reference
setList([...list, 'item']);

การอ่านข้อผิดพลาดในหน้าซ้อนทับข้อผิดพลาด

ตรวจสอบอย่างรวดเร็ว

สรุป

จบหลักสูตร