ข้อผิดพลาด:ไม่สามารถอ่านคุณสมบัติ 'setState' ของ undefined

เมื่อคุณเริ่มเขียนส่วนประกอบ React ครั้งแรก คุณอาจพบข้อผิดพลาดหลายอย่างพร้อมกัน ข้อผิดพลาดสองประการคือ "ไม่สามารถอ่านคุณสมบัติ 'setState' ของ undefined" และ "this.setState ไม่ใช่ฟังก์ชัน" บทความนี้จะพิจารณาสองสามวิธีในการขจัดข้อผิดพลาดเหล่านี้

ทำไม?

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

import React from "react";
import "./styles.css";
 
class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     input: ""
   };
 }
 
 handleChange(e) {
   this.setState({[e.target.name]: e.target.value})
 }
 render() {
   console.log(this.state)
   return (
     <div className="App">
       <h1>Sample React Application</h1>
       <input name="input" onChange={this.handleChange} value={this.state.input} type="text" placeholder="Type here..."/>
       <input type="submit" />
     </div>
   );
 }
}
 
export default App;

เมื่อมองแวบแรก โค้ดก็ดูดี แต่ถ้าเรามองเข้าไปใกล้ๆ เราจะเห็นว่าเมธอด handleChange ไม่ได้ผูกกับคลาสแอป ดังนั้นคีย์เวิร์ด "นี้" จะอ้างอิงถึงหน้าต่างในอินสแตนซ์นี้ มาดูให้ละเอียดยิ่งขึ้น ให้เพิ่ม console.log(นี้) ให้กับทั้งบรรทัดแรกของเมธอด handleChange และจากนั้นไปที่บรรทัดแรกของการเรนเดอร์:

handleChange(e) {
   console.log(this, "change")
   this.setState({[e.target.name]: e.target.value})
 }

render() {
   console.log(this, "render")
   return (
     <div className="App">
       <h1>Sample React Application</h1>
       <input name="input" onChange={this.handleChange} value={this.state.input} type="text" placeholder="Type here..."/>
       <input type="submit" />
     </div>
   );
 }

หากเราดูที่คอนโซลเมื่อเราโหลดแอปพลิเคชัน เราจะเห็นว่าคำหลัก "นี้" หมายถึงแอป หากเราพยายามใช้อินพุตของเรา เราได้รับข้อผิดพลาดบนหน้าจอ แต่ถ้าเราดูที่คอนโซล เราจะเห็นว่าคีย์เวิร์ด "นี้" ที่นั่นหมายถึง Window Object ไม่ใช่ App มีสองวิธีในการแก้ไขปัญหานี้:

1. ผูกวิธีการ

ภายใน Constructor หลังจาก state object ให้ป้อนบรรทัดนี้:

   this.handleChange = this.handleChange.bind(this);

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

2. ฟังก์ชันลูกศร ES6

ใช้ไวยากรณ์ ES6 สำหรับฟังก์ชันลูกศรขนาดใหญ่ มันผูกคีย์เวิร์ด "นี้" กับเมธอดนั้นโดยอัตโนมัติ ดังนั้นคุณจึงไม่ต้องผูกมันในตัวสร้าง:

handleChange = (e) => {
   this.setState({[e.target.name]: e.target.value})
 }

ที่นั่นคุณมีมัน! นั่นคือวิธีที่คุณกำจัดข้อผิดพลาด "this.setState" คือ "undefined" หรือ "not a function" เมื่อใช้โครงสร้างองค์ประกอบคลาสใน React หากคุณต้องการป้องกันข้อผิดพลาดเหล่านี้ในอนาคต ให้เปลี่ยนองค์ประกอบ React ของคุณเป็นการใช้ส่วนประกอบที่ใช้งานได้กับ React Hooks แทน!

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

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