จัดการสถานะใน React ด้วย setState

การติดตามสถานะของแอปพลิเคชันคือวิธีที่แอปพลิเคชันหน้าเดียว (SAP) ลงทะเบียนการเปลี่ยนแปลงและแสดงผลให้กับผู้ใช้ ต่างจากเฟรมเวิร์กโมเดล มุมมอง ตัวควบคุม (MVC) SAP จะไม่เปลี่ยนเส้นทางผู้ใช้ ดังนั้นจึงต้องการวิธีจัดการการเปลี่ยนแปลงที่มาจากฝั่งไคลเอ็นต์ หากต้องการตรวจสอบเฟรมเวิร์ก MVC ให้อ้างอิงกับคู่มือนี้

ใน React ส่วนประกอบสามารถจัดการสถานะของตนเองและแสดงผลใหม่ได้ตามลำดับ ซึ่งทำได้โดยใช้วิธีวงจรชีวิต ซึ่งจะกล่าวถึงในเชิงลึกที่นี่ สำหรับวัตถุประสงค์ของบทความนี้ เราจะมาดูวิธีการเปลี่ยนสถานะโดยใช้ setState

คู่มือนี้จะถือว่ามีความคุ้นเคยกับ React เบื้องต้น ในการทบทวนหรือเรียนรู้พื้นฐานของ React บทความนี้แสดงรายการแหล่งข้อมูลการเรียนรู้ React ที่ดีที่สุดบางส่วน

React setState คืออะไร

เมธอด React setState คือวิธีการเปลี่ยนสถานะของส่วนประกอบด้วยความเสถียร มีแนวทางเฉพาะในการเปลี่ยนสถานะใน React

1. setState สามารถเรียกได้ภายในองค์ประกอบคลาสเท่านั้น ส่วนประกอบของคลาสเรียก constructor() วิธีการและตั้งค่าสถานะเริ่มต้น จากนั้นเราสามารถเปลี่ยนสถานะเพิ่มเติมได้โดยเรียก setState
   
   มีส่วนประกอบสองประเภทที่แตกต่างกันใน React มีองค์ประกอบการทำงานและองค์ประกอบคลาส สำหรับจุดประสงค์ของเรา เราอ้างอิงเฉพาะส่วนประกอบของคลาส สำหรับการตรวจสอบเพิ่มเติม โปรดดูบทความนี้เกี่ยวกับความแตกต่างระหว่างส่วนประกอบการทำงานและส่วนประกอบในชั้นเรียน
   
2. เพียงแค่เรียก setState ในองค์ประกอบคลาส เราสามารถอ้างอิงส่วนประกอบโดยตรงโดยใช้ สิ่งนี้ คำสำคัญ. กำลังเรียก this.setState() เป็นแนวทางปฏิบัติที่ดีที่สุดและช่วยให้มั่นใจว่าโค้ดของคุณจะไม่พัง
   
3. ห้ามแก้ไขสถานะโดยตรง การแก้ไขสถานะโดยตรงจะไม่ลงทะเบียนเพื่อตอบโต้เพื่อแสดงซ้ำ จุดรวมของการเปลี่ยนแปลงสถานะคือการเรียกใช้การแสดงผลซ้ำของส่วนประกอบนั้นเพื่อสะท้อนการเปลี่ยนแปลงกลับไปยังผู้ใช้

ตอนนี้ มาดูไวยากรณ์ในบริบทของหลักเกณฑ์เหล่านี้กัน

ไวยากรณ์ setState React

เริ่มต้นด้วยแนวทางแรก เราจะเห็นว่าเราสามารถใช้ setState ภายในองค์ประกอบคลาสเท่านั้น ตัวอย่างเช่น สมมติว่าเรามีแอปสำหรับซื้อของและเราต้องการใช้ตะกร้าสินค้า เราสามารถตั้งค่าองค์ประกอบคลาสที่เรียกว่ารถเข็น องค์ประกอบนี้จะรับผิดชอบในการจัดการสถานะของตนเองเมื่อผู้ใช้เพิ่มสินค้าลงในรถเข็น

class Cart extends React.Component {
  constructor(props){
    super(props);
    this.state = {shoppingCart: []}
  }

เมื่อแยกย่อยรหัสข้างต้น เราประกาศคลาสส่วนประกอบรถเข็น เช่นเดียวกับองค์ประกอบคลาสทั้งหมด เรา ขยาย React.ส่วนประกอบ นี่คือไวยากรณ์ React ต้นแบบ

เนื่องจากเราต้องการกำหนด state ให้กับ component นี้ เราจึงต้องเรียก constructor method จากนั้น คอนสตรัคเตอร์พื้นฐานจะถูกเรียกด้วย super(props) . เป็นไปได้ที่จะเห็นตัวสร้างฐานที่ไม่ได้ถูกเรียกด้วยอุปกรณ์ประกอบฉาก เอกสาร React อย่างเป็นทางการระบุว่าวิธีการสร้างฐานควรถูกเรียกด้วยอุปกรณ์ประกอบฉากเสมอ

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ตอนนี้เราได้สร้างมันผ่านไวยากรณ์ React ที่จำเป็นในการสร้างองค์ประกอบคลาสเพื่อคงสถานะแล้ว เราก็พร้อมที่จะกำหนดสถานะเริ่มต้นของเรา นี่เป็นครั้งเดียวที่เราสามารถอ้างอิงถึงรัฐได้โดยตรง กำหนดสถานะโดยการเรียก this.state = {shoppingCart: [] } ทำให้เราสามารถกำหนดสถานะเริ่มต้นของตะกร้าสินค้าของเราเป็นอาร์เรย์ที่ว่างเปล่าได้

ตอบสนองตัวอย่าง setState

ในส่วนข้างต้น เราได้พิจารณาไวยากรณ์ที่เกี่ยวข้องกับการประกาศสถานะเริ่มต้น เมื่อสถานะถูกตั้งค่าในวิธี Constructor เราสามารถแสดงผลได้ตามปกติ:

class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shoppingCart: []
    }
  }
  render() {
    return (
     <div>
     <h1>Your Shopping Cart</h1>
     <div>{this.state.shoppingCart}</div>
     </div>

    );
  }
}
ReactDOM.render(
  <Cart />,
  document.getElementById('root')
);

ที่นี่ เรามีองค์ประกอบคลาสรถเข็นพร้อมชุดสถานะเริ่มต้นและกำลังแสดงรถเข็นในคำสั่งส่งคืนของวิธีการเรนเดอร์ มาดูกันว่าเราจะใช้ setState เพื่ออัปเดตรถเข็นของเราได้อย่างไร

เรากำหนดฟังก์ชั่นที่จะเพิ่มสินค้าใหม่ให้กับรถเข็นของเราในขณะที่รักษาสินค้าที่เพิ่มไว้ก่อนหน้านี้ เราใช้ตัวดำเนินการการแพร่กระจายของ JavaScript (…) เพื่อสร้างสำเนาของสถานะเริ่มต้นและอัปเดตด้วยสถานะใหม่ วิธีนี้ตะกร้าสินค้าจะเก็บสินค้าทั้งหมดที่เพิ่มเข้ามา

addItem(newItem) {
    this.setState({
     shoppingCart: [...this.state.shoppingCart, newItem]
    })
  }

สามารถใช้ฟังก์ชัน addItem ภายในแอตทริบิวต์ onClick ของ React ของปุ่มได้ หากเราต้องการให้ผู้ใช้เพิ่มรายการนั้นได้เมื่อมีการคลิกปุ่ม เพื่อจุดประสงค์ของเรา การดูวิธีใช้ setState ในบริบทของฟังก์ชันก็เพียงพอแล้ว

บทความนี้มีขึ้นเพื่อเป็นการแนะนำเพื่อทำความเข้าใจวิธีใช้ setState และไม่ละเอียดถี่ถ้วน

บทสรุป

ในบทความนี้ เราได้เรียนรู้ว่า setState คืออะไร แนวทางการใช้งาน ไวยากรณ์ และตัวอย่างโดยย่อ มีขึ้นเพื่อเป็นบทความเบื้องต้นเพื่อสนับสนุนให้คุณเจาะลึกและฝึกฝนการอัปเดตสถานะของส่วนประกอบด้วยตัวคุณเอง

เอกสาร React อย่างเป็นทางการมีตัวอย่างเพิ่มเติมที่จะให้โอกาสในการฝึกฝนมากขึ้น โปรดจำไว้ว่าในแอปพลิเคชันหน้าเดียว การติดตามสถานะของส่วนประกอบเป็นสิ่งสำคัญในการแสดงการเปลี่ยนแปลงต่อผู้ใช้