Jquery React教程-为什么在ajax调用中绑定此项

我现在正在做React教程，想知道ajax调用中的绑定。为什么我们需要在ajax调用中绑定它以获得成功和错误？显然，当我删除绑定时，函数将抛出一个错误。我们使用绑定是因为函数中有

this.setState

，需要正确的引用吗

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

//tutorial13.js
var CommentBox=React.createClass({
getInitialState:函数（）{
返回{data:[]}；
},
componentDidMount:function（）{
$.ajax({
url:this.props.url，
数据类型：“json”，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
render:function（）{
返回(
评论
);
}
});

哦，我想出来了！在使用dev工具进行检查之后，“this”指的是ReactClass.createClass.Constructor。因此，在ajax调用success and error中绑定this的原因是为了确保在调用

this.setState（{data:data}）时使用正确的“this”

或

console.error（this.props.url，status，err.toString（））

如果我们不约束“这个”。我们失去了对“this”的正确反应，“this”随时可能变成window、jQuery或其他东西。这就是我们得到错误“UncaughtTypeError:undefined不是函数”的原因
 
此
引用调用函数的对象
bind
的第一个参数是this

的值。因此，

function（data）{…}.bind（一个_对象）

可以理解为“调用这个函数，但是在函数内部设置

this

来引用一个_对象”。在React教程中，

一个对象

指的是React组件。因此：

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

---

此

引用AJAX对象

console.log（此）

为我们提供

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

---

---

此

指反应组件

console.log（此）

为我们提供

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

---

为了进一步阅读，尼古拉斯·扎卡斯的书详细解释了

bind

的工作原理

componentDidMount: function() {
    var me = this;

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

componentDidMount: function() {
    var me = this;

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