Phản hồi hướng dẫn- tại sao ràng buộc điều này trong cuộc gọi ajax

Question

Tôi đang thực hiện hướng dẫn React ngay bây giờ và tự hỏi ràng buộc trong cuộc gọi ajax. Tại sao chúng ta cần phải ràng buộc điều này để thành công và lỗi trong cuộc gọi ajax? Rõ ràng khi tôi gỡ bỏ ràng buộc, chức năng sẽ ném một lỗi. Chúng ta có sử dụng ràng buộc bởi vì chúng ta có this.setState trong hàm và cần một tham chiếu đúng không?

// tutorial13.js 
var CommentBox = React.createClass({ 
    getInitialState: function() { 
    return {data: []}; 
    }, 
    componentDidMount: function() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    render: function() { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 
     <CommentList data={this.state.data} /> 
     <CommentForm /> 
     </div> 
    ); 
    } 
}); 

Answer 1

this đề cập đến đối tượng được gọi là hàm. Đối số đầu tiên của bind là giá trị của this. Vì vậy, function(data){...}.bind(an_object) có thể được đọc là "gọi hàm này, nhưng đặt this bên trong hàm để tham chiếu đến an_object". Trong trường hợp của hướng dẫn React, an_object đề cập đến thành phần React. Vì vậy:

success: function(data) { 
     this.setState({data: data}); 
} 

this là đối tượng AJAX. console.log(this) cho chúng ta

Object {url: "comments.json", type: "GET", isLocal: false, global: true, processData: true…} 

---

success: function(data) { 
     this.setState({data: data}); 
}.bind(this) 

this đề cập đến các thành phần phản ứng. console.log(this) cho chúng ta

ReactCompositeComponent.createClass.Constructor {props: Object, _owner: null, _lifeCycleState: "MOUNTED", _pendingCallbacks: null, _currentElement: ReactElement…} 

Để đọc thêm, Nicholas Zakas của cuốn sách Object Oriented Javascript tả chi tiết cách bind công trình.

Answer 2

Ồ, tôi đã tìm ra! Sau khi sử dụng công cụ dev để kiểm tra xung quanh, "this" đang đề cập đến ReactClass.createClass.Constructor. Vì vậy, lý do để ràng buộc điều này trong thành công và lỗi gọi ajax là đảm bảo chúng tôi có quyền "này" khi chúng tôi gọi this.setState({data:data}); hoặc console.error(this.props.url, status, err.toString());

Nếu chúng tôi không ràng buộc "điều này". chúng ta đã mất quyền React "this", và "this" có thể trở thành cửa sổ, jQuery hay những thứ khác trong bất cứ lúc nào. Đó là lý do chúng tôi nhận được lỗi của "Uncaught TypeError: undefined không phải là một hàm".

Answer 3

Tuyên bố tương đương với

componentDidMount: function() { 
    var me = this; 

    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     success: function(data) { 
     me.setState({data: data}); 
     } 
    }); 
}