ES6/React“this”关键字与ajax一起从服务器获取数据（教程）[重复]

Question

我正在学习React初学者教程，并试图将其翻译成ES6。但是，当我将CommentBox更改为ES6类时，它开始给我一个this.props.url是未定义的错误（在loadCommentsFromServer中的AJAX调用中）。我认为这与ES6如何绑定this有关，但我对这门语言不太熟悉（也不太熟悉），所以我不确定。我查看了React 0.13发行说明，看到了以下内容：

React.createClass有一个内置的神奇功能，可以为您自动将所有方法绑定到this。对于其他类中不习惯此功能的JavaScript开发人员来说，这可能有点让人困惑，或者当他们从React移动到其他类时，这可能会让人困惑。

我不太确定，但我认为这意味着我必须保存这个的值（如let that=this和. bind（that）），但这也给了相同的this.props.url是未定义的-我不知道下一步去哪里。

以下是我当前的代码：

class CommentBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  loadCommentsFromServer() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({
          data: data
        })
      }.bind(this)
    });
  }
  handleCommentSubmit(comment) {
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({ data: newComments });
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({ data: data });
      },
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  }
  componentDidMount() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  }
  render() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data}/>
        <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
      </div>
    );
  }
};




Answer 1

这是特定于作为ES6类实现的React.Component的行为。使用ES5样式时，React组件自动绑定其所有功能。使用ES6类样式时，自动绑定的唯一方法是React.Component（render，componentDidMount等）中专门包含的方法。

这实际上在文档中提到过，尽管很容易忽略。

别难过；我知道它在文档中，因为我第一次将一些可用的React组件移植到ES6类时，就不得不去寻找它。

Answer 2

在诸如success和error之类的回调函数中，作用域会发生变化，因此“this”不再是CommentBox。

你需要做一些事情，比如：

handleCommentSubmit(comment) {
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({ data: newComments });
    var comment_box = this;
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        comment_box.setState({ data: data });
      },
      error: function(xhr, status, err) {
        console.error(comment_box.props.url, status, err.toString());
      }.bind(this)
    });
  }

将此应用于代码中的其他适用位置

Answer 3

你需要使用bind（this）来绑定你的事件。

componentDidMount() {
    this.loadCommentsFromServer().bind(this);
    setInterval(this.loadCommentsFromServer.bind(this), this.props.pollInterval);
  }

您可以从以下链接阅读参考：https://facebook.github.io/react/docs/reusable-components.html#no-自动绑定

没有自动绑定方法遵循与常规ES6类相同的语义学，这意味着它们不会自动将其绑定到实例。您必须显式地使用. bind（this）或箭头函数=