จัดการ State ใน React ด้วย setState: คู่มือสำหรับ Class Component

setState คืออะไร?

เมธอดหลักสำหรับ **อัปเดต State** ใน Class Component ทำให้ Component Re-render เพื่อแสดงการเปลี่ยนแปลง

กฎสำคัญ 3 ข้อ

1. เรียกใช้ได้ **เฉพาะใน Class Component** เท่านั้น
2. ต้องเรียกผ่าน this.setState() (ใช้ this อ้างอิง Component ตัวเอง)
3. **ห้ามแก้ State โดยตรง** เช่น this.state.count = 5 → จะไม่ Trigger Re-render

โครงสร้าง Class Component พร้อม State

class Cart extends React.Component {
  constructor(props) {
    super(props); // บังคับ
    this.state = { shoppingCart: [] }; // Initial State
  }
  
  addItem(newItem) {
    this.setState({
      shoppingCart: [...this.state.shoppingCart, newItem] // Spread Operator คัดลอก Array เก่า + เพิ่มใหม่
    });
  }
  
  render() {
    return (
      <div>
        <h1>Your Shopping Cart</h1>
        <div>{this.state.shoppingCart.join(', ')}</div>
        <button onClick={() => this.addItem('New Item')}>Add</button>
      </div>
    );
  }
}

จุดสำคัญ

• ใช้ Spread Operator ... เพื่อ **ไม่ Mutate State เดิม** (Immutability)
• setState เป็น Asynchronous อาจ Batch หลายครั้งเข้าด้วยกัน
• Functional Components ใช้ useState Hook แทน

สรุป

setState เป็นหัวใจของการจัดการ State ใน Class Component ต้องปฏิบัติกฎ Immutability และใช้ this.setState() เสมอเพื่อให้ Re-render ทำงานถูกต้อง