React - unsaught TypeError: Không thể đọc thuộc tính 'setState' không xác định

Tôi nhận được lỗi sau

Uncaught TypeError: Không thể đọc thuộc tính 'setState' không xác định

thậm chí sau khi ràng buộc delta trong hàm tạo.

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

Điều này là do this.deltakhông bị ràng buộc this.

Để liên kết được thiết lập this.delta = this.delta.bind(this)trong hàm tạo:

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

    this.delta = this.delta.bind(this);
}

Hiện tại, bạn đang gọi ràng buộc. Nhưng liên kết trả về một hàm ràng buộc. Bạn cần đặt hàm thành giá trị ràng buộc của nó.

Trong ES7 + (ES2016), bạn có thể sử dụng toán tử cú pháp liên kết hàm thử nghiệm ::để liên kết. Nó là một loại đường cú pháp và sẽ làm giống như câu trả lời của Davin Tryon.

Sau đó bạn có thể viết lại this.delta = this.delta.bind(this);thànhthis.delta = ::this.delta;

Đối với ES6 + (ES2015), bạn cũng có thể sử dụng hàm mũi tên ES6 + ( =>) để có thể sử dụng this.

delta = () => {
    this.setState({
        count : this.state.count + 1
    });
}

Tại sao ? Từ tài liệu Mozilla:

Cho đến khi các hàm mũi tên, mọi hàm mới đều tự xác định giá trị này [...]. Điều này tỏ ra khó chịu với phong cách lập trình hướng đối tượng.

Các hàm mũi tên nắm bắt giá trị này của bối cảnh kèm theo [...]

Có một sự khác biệt về bối cảnh giữa lớp ES5 và ES6. Vì vậy, sẽ có một chút khác biệt giữa các triển khai là tốt.

Đây là phiên bản ES5:

var Counter = React.createClass({
    getInitialState: function() { return { count : 1 }; },
    delta: function() {
        this.setState({
            count : this.state.count++
        });
    },
    render: function() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta}>+</button>
            </div>
            );
    }
});

và đây là phiên bản ES6:

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : 1 };
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta.bind(this)}>+</button>
            </div>
            );
    }
}

Chỉ cần cẩn thận, bên cạnh sự khác biệt cú pháp trong việc thực hiện lớp, có một sự khác biệt trong ràng buộc xử lý sự kiện.

Trong phiên bản ES5, nó

              <button onClick={this.delta}>+</button>

Trong phiên bản ES6, đó là:

              <button onClick={this.delta.bind(this)}>+</button>

Khi sử dụng mã ES6 trong React luôn luôn sử dụng mũi tên chức năng, bởi vì này bối cảnh được tự động binded với nó

Dùng cái này:

(videos) => {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

thay vì:

function(videos) {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

Bạn không phải ràng buộc bất cứ điều gì, Chỉ cần sử dụng các chức năng Mũi tên như thế này:

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1
        };

    }
    //ARROW FUNCTION
    delta = () => {
        this.setState({
            count: this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

Bạn cũng có thể dùng:

<button onClick={()=>this.delta()}>+</button>

Hoặc là:

<button onClick={event=>this.delta(event)}>+</button>

Nếu bạn đang vượt qua một số thông số ..

Bạn cần liên kết điều này với hàm tạo và nhớ rằng các thay đổi đối với hàm tạo cần khởi động lại máy chủ. Hoặc nếu không, bạn sẽ kết thúc với cùng một lỗi.

Bạn phải liên kết các phương thức của mình với 'this' (đối tượng mặc định). Vì vậy, bất cứ chức năng nào của bạn có thể chỉ là liên kết trong hàm tạo.

constructor(props) {
    super(props);
    this.state = { checked:false };

    this.handleChecked = this.handleChecked.bind(this);
}

handleChecked(){
    this.setState({
        checked: !(this.state.checked)
    })
}

render(){
    var msg;

    if(this.state.checked){
        msg = 'checked'
    }
    else{
        msg = 'not checked'
    }

    return (
        <div>               
            <input type='checkbox' defaultChecked = {this.state.checked} onChange = {this.handleChecked} />
            <h3>This is {msg}</h3>
        </div>
    );

Lỗi này có thể được giải quyết bằng nhiều phương pháp khác nhau-

• Nếu bạn đang sử dụng cú pháp ES5 , thì theo Tài liệu React js, bạn phải sử dụng phương thức liên kết .

  Một cái gì đó như thế này cho ví dụ trên:

  this.delta = this.delta.bind(this)

• Nếu bạn đang sử dụng cú pháp ES6 , thì bạn không cần sử dụng phương thức liên kết , bạn có thể làm điều đó với một cái gì đó như thế này:

  delta=()=>{ this.setState({ count : this.state.count++ }); }

Có hai giải pháp cho vấn đề này:

Giải pháp đầu tiên là thêm một hàm tạo vào thành phần của bạn và liên kết hàm của bạn như dưới đây:

constructor(props) {
        super(props);

        ...

        this.delta = this.delta.bind(this);
    }

Vì vậy, làm điều này:

this.delta = this.delta.bind(this); 

Thay vì điều này:

this.delta.bind(this);

Giải pháp thứ hai là sử dụng chức năng mũi tên thay thế:

delta = () => {
       this.setState({
           count : this.state.count++
      });
   }

Trên thực tế chức năng mũi tên KHÔNG ràng buộc nó là của riêng mình this. Các hàm mũi tên bindtheo ngữ cảnh của chúng để thisthực sự đề cập đến bối cảnh ban đầu .

Để biết thêm thông tin về chức năng liên kết:

Hàm Bind Hiểu JavaScript Bind ()

Để biết thêm thông tin về chức năng mũi tên:

Javascript ES6 - Hàm mũi tên và Từ điển this

bạn phải liên kết sự kiện mới với từ khóa này như tôi đề cập dưới đây ...

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta = this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
      }
    }

Thêm

onClick = {this.delta.bind (this)}

sẽ giải quyết vấn đề. lỗi này xuất hiện khi chúng ta cố gắng gọi hàm của lớp ES6, vì vậy chúng ta cần liên kết phương thức.

Chức năng mũi tên có thể làm cho cuộc sống của bạn dễ dàng hơn để tránh ràng buộc từ khóa này . Thích như vậy:

 delta = () => {
       this.setState({
           count : this.state.count++
      });
   }

mặc dù câu hỏi này đã có một giải pháp, tôi chỉ muốn chia sẻ câu hỏi của mình để làm cho nó được xóa, hy vọng nó có thể giúp:

/* 
 * The root cause is method doesn't in the App's context 
 * so that it can't access other attributes of "this".
 * Below are few ways to define App's method property
 */
class App extends React.Component {
  constructor() {
     this.sayHi = 'hello';
     // create method inside constructor, context = this
     this.method = ()=> {  console.log(this.sayHi) };

     // bind method1 in constructor into context 'this'
     this.method1 = this.method.bind(this)
  }

  // method1 was defined here
  method1() {
      console.log(this.sayHi);
  }

  // create method property by arrow function. I recommend this.
  method2 = () => {
      console.log(this.sayHi);
  }
   render() {
   //....
   }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

  </head>
  <body>
  <div id="root"></div>
    <script type="text/babel">

        class App extends React.Component{

            constructor(props){
                super(props);
                this.state = {
                    counter : 0,
                    isToggle: false
                }
            this.onEventHandler = this.onEventHandler.bind(this);   
            }

            increment = ()=>{
                this.setState({counter:this.state.counter + 1});
            }

            decrement= ()=>{
                if(this.state.counter > 0 ){
                this.setState({counter:this.state.counter - 1});    
                }else{
                this.setState({counter:0});             
                }
            }
            // Either do it as onEventHandler = () => {} with binding with this  // object. 
            onEventHandler(){
                this.setState({isToggle:!this.state.isToggle})
                alert('Hello');
            }


            render(){
                return(
                    <div>
                        <button onClick={this.increment}> Increment </button>
                        <button onClick={this.decrement}> Decrement </button>
                        {this.state.counter}
                        <button onClick={this.onEventHandler}> {this.state.isToggle ? 'Hi':'Ajay'} </button>

                    </div>
                    )
            }
        }
        ReactDOM.render(
        <App/>,
        document.getElementById('root'),
      );
    </script>
  </body>
  </html>

Chỉ cần thay đổi câu lệnh liên kết của bạn từ những gì bạn phải => this.delta = this.delta.bind (this);

1. Kiểm tra trạng thái kiểm tra trạng thái xem bạn có tạo tài sản cụ thể hay không

this.state = {
            name: "",
            email: ""
            }
            
           
            
this.setState(() => ({ 
             comments: comments          //comments not available in state
             })) 

2. Kiểm tra (cái này) nếu bạn thực hiện setState bên trong bất kỳ chức năng nào (ví dụ: handChange) kiểm tra xem hàm có liên kết với hàm này hay hàm nên là hàm mũi tên.

## 3 cách để ràng buộc điều này với chức năng dưới đây ##

//3 ways for binding this to the below function

handleNameChange(e) {  
     this.setState(() => ({ name }))
    }
    
// 1.Bind while callling function
      onChange={this.handleNameChange.bind(this)}
      
      
//2.make it as arrow function
     handleNameChange((e)=> {  
     this.setState(() => ({ name }))
     })
    
//3.Bind in constuctor 

constructor(props) {
        super(props)
        this.state = {
            name: "",
            email: ""
        }
        this.handleNameChange = this.handleNameChange.bind(this)
        }

nếu bạn đang sử dụng cú pháp ES5 thì bạn cần liên kết nó đúng cách

this.delta = this.delta.bind(this)

và nếu bạn đang sử dụng ES6 trở lên bạn có thể sử dụng mũi tên chức năng, sau đó bạn không cần phải sử dụng bind () nó

delta = () => {
    // do something
  }