React 教程-为什么在 ajax 调用中绑定它

IT技术 jquery reactjs
2021-05-04 17:02:28

我现在正在做 React 教程，并想知道 ajax 调用中的绑定。为什么我们需要在 ajax 调用中为成功和错误绑定 this？显然，当我删除绑定时，该函数会抛出错误。我们使用绑定是因为我们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>
    );
  }
});
3个回答

this指的是调用函数的对象。bind的第一个参数是 的值this。所以function(data){...}.bind(an_object)可以理解为“调用这个函数，但this在函数内部设置要引用an_object”。在 React 教程中，an_object指的是 React 组件。所以：

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

this指的是 AJAX 对象。console.log(this)给我们

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

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

this指的是 React 组件。console.log(this)给我们

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

为了进一步阅读，Nicholas Zakas 的Object Oriented Javascript一书详细解释了它的bind工作原理。

该语句等效于

componentDidMount: function() {
    var me = this;

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

哦，我想通了！使用开发工具检查后，“this”指的是ReactClass.createClass.Constructor。所以在 ajax 调用成功和错误中绑定 this 的原因是为了确保我们在调用this.setState({data:data});或console.error(this.props.url, status, err.toString());

如果我们不绑定“this”。我们失去了正确的 React “this”，而“this”可能随时会变成 window、jQuery 或其他东西。这就是我们收到“Uncaught TypeError: undefined is not a function”错误的原因。

其它你可能感兴趣的问题
上一篇使用 Jest 和 React 模拟非默认函数 下一篇将 ErrorBoundary 与异步生命周期函数一起使用