Question

在reactjs教程中，在ajax回调结束时拥有.bind(this)的目的是什么？没有它，代码是否正常工作？

        data: JSON.stringify({text: text}),
        success: function (data) {
            this.setState({data: data});
        }.bind(this),

Answer 1

确保this成为回调中的正确对象。请参阅Function.prototype.bind()。

具体的反应方式是：

myAjaxFunction: function(){
  $.getJSON('/something', this.handleData);
},
handleData: function(data){
  this.setState({data: data});
}

这是有效的，因为React会为你处理组件方法的绑定。

如果您在没有绑定的情况下运行原始代码，则会收到此错误：TypeError: undefined is not a function，因为回调中为this === window;

或严格模式：TypeError: Cannot read property 'setState' of undefined，其中回调中为this === undefined。

Answer 2

在ajax回调结束时使.bind(this)的目的是让this与您的反应类相关联。换句话说，您可以添加：

var self = this;

在ajax之外，它的工作方式相同。您的代码等于：

var self = this;
$.ajax({
    .
    .
    data: JSON.stringify({text: text}),
    success: function (data) {
        self.setState({data: data});
    },
    .
    .
});

.bind（this）在ajax回调结束时的目的？

2 个答案: