Lỗi:Không thể đọc thuộc tính 'setState' của không xác định

Khi bạn lần đầu tiên bắt đầu viết các thành phần React, bạn có thể gặp phải một số lỗi khác nhau trên đường đi. Hai lỗi như vậy là “Không thể đọc thuộc tính‘ setState ’của undefined” và “this.setState không phải là một hàm”. Bài viết này sẽ xem xét một số cách để làm cho những lỗi này biến mất.

Tại sao?

Những lỗi này xảy ra do phương thức bạn đang sử dụng hoặc gọi trong Thành phần React của bạn không được ràng buộc một cách chính xác. Đây là một ví dụ về mã sẽ gây ra lỗi (Điều này giả sử rằng bạn đã thiết lập đúng thành phần React của mình):

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;

Thoạt nhìn, đoạn mã có vẻ ổn, nhưng nếu chúng ta nhìn kỹ hơn, chúng ta thấy phương thức handleChange không bị ràng buộc với lớp App nên từ khóa “this” sẽ tham chiếu đến Window trong trường hợp này. Để xem xét kỹ hơn, hãy thêm console.log (this) vào cả dòng đầu tiên của phương thức handleChange và sau đó vào dòng đầu tiên của kết xuất:

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>
   );
 }

Nếu chúng ta nhìn vào bảng điều khiển khi tải ứng dụng, chúng ta sẽ thấy rằng từ khóa "this" đề cập đến Ứng dụng. Nếu chúng tôi cố gắng sử dụng đầu vào của mình, chúng tôi sẽ gặp lỗi trên màn hình, nhưng nếu chúng tôi nhìn vào bảng điều khiển, chúng tôi sẽ thấy rằng từ khóa “this” ở đó đề cập đến Đối tượng Cửa sổ, không phải Ứng dụng. Có hai cách để khắc phục sự cố này:

1. Ràng buộc Phương pháp

Bên trong hàm tạo, sau đối tượng trạng thái, hãy nhập dòng này:

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

Dòng này sẽ liên kết từ khóa “this” với phương thức handleChange để nó có thể tham chiếu rõ ràng đến thành phần Ứng dụng khi gọi ra handleChange. Nếu không, phương thức không biết hoặc không thấy thành phần mà bạn muốn nó hoạt động.

2. Hàm mũi tên ES6

Sử dụng cú pháp ES6 cho hàm mũi tên lớn. Nó tự động liên kết từ khóa “this” với phương thức đó, do đó bạn không cần phải liên kết nó trong hàm tạo:

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

Đây là bạn có nó! Đó là cách bạn loại bỏ lỗi “this.setState” là “không xác định” hoặc “không phải là một hàm” khi sử dụng cấu trúc thành phần lớp trong React. Nếu bạn muốn ngăn chặn những lỗi này trong tương lai, hãy cấu trúc lại thành phần React của bạn để sử dụng các thành phần chức năng với React Hooks thay thế!

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.