为什么我的ReactJS代码中没有定义this.props？

在学习React和ES6的过程中，我学习了官方教程，并尝试使其与ES6兼容。但在执行Ajax请求时，我会遇到以下错误：

js:23未捕获类型错误：无法读取未定义的属性“url”

以下是我的CommentBox文件/代码：

import React from 'react';
import CommentList from './CommentList.js';
import CommentForm from './CommentForm.js';

export default class CommentBox extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props)
    this.state = {
      data: []
    }
  }

  loadCommentsFromServer() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  }

  handleCommentSubmit(comment) {
    let comments = this.state.data;

    // Optimistically set  id on the new comment.
    // It will be replaced by an id generated by the server.
    // In a production you would have a more robust system in place.
    comment.id = Date.now();
    let 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});
      }.bind(this),
      error: function(xhr, status, err) {
        this.setState({data: comments});
        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>
    );
  }
}

从“React”导入React；
从“/CommentList.js”导入CommentList；
从“/CommentForm.js”导入CommentForm；
导出默认类CommentBox扩展React.Component{
建造师（道具）{
超级（道具）；
console.log（this.props）
此.state={
数据：[]
}
}
loadCommentsFromServer（）{
$.ajax({
url:this.props.url，
数据类型：“json”，
cache:false，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
}
handleCommentSubmit（评论）{
让注释=this.state.data；
//乐观地设置新评论的id。
//它将被服务器生成的id替换。
//在生产中，您将拥有一个更健壮的系统。
comment.id=Date.now（）；
让newComments=comments.concat（[comment]）；
this.setState（{data:newcommons}）；
$.ajax({
url:this.props.url，
数据类型：“json”，
键入：“POST”，
数据：评论，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
this.setState（{data:comments}）；
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
}
componentDidMount（）{
this.loadCommentsFromServer（）；
setInterval（this.loadCommentsFromServer，this.props.pollInterval）；
}
render（）{
返回(
评论
);
}
}

---

该错误发生在服务器的加载注释上；它似乎不知道这个.props是什么。我认为这是一个参考问题，并找到了一个建议使用新ES6箭头来解决该问题的方法。然后我尝试：

loadCommentsFromServer=（）=>{}

，但是Browserify抱怨并且没有构建。

这一行是您的问题：

setInterval(this.loadCommentsFromServer, this.props.pollInterval);

您正在将方法

loadCommentsFromServer

传递到

setInterval

，但它将在没有上下文的情况下被调用，因此

此

将不再绑定到组件（

此

将绑定到窗口）。相反，您应该这样做：

setInterval(this.loadCommentsFromServer.bind(this), this.props.pollInterval);
// OR... use a fat arrow, which preserves `this` context
setInterval(() => this.loadCommentsFromServer(), this.props.pollInterval); 

最后，您应该存储间隔id，以便在卸载组件时清除它：

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

componentWillUnmount() {
   clearInterval(this.intervalId);
}

---

这是你的问题：

setInterval(this.loadCommentsFromServer, this.props.pollInterval);

您正在将方法

loadCommentsFromServer

传递到

setInterval

，但它将在没有上下文的情况下被调用，因此

此

将不再绑定到组件（

此

将绑定到窗口）。相反，您应该这样做：

setInterval(this.loadCommentsFromServer.bind(this), this.props.pollInterval);
// OR... use a fat arrow, which preserves `this` context
setInterval(() => this.loadCommentsFromServer(), this.props.pollInterval); 

最后，您应该存储间隔id，以便在卸载组件时清除它：

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

componentWillUnmount() {
   clearInterval(this.intervalId);
}

我认为这是一个参考问题，在谷歌上搜索我发现的 他们建议使用新ES6的类似问题 解决此问题的箭头。然后我尝试使用：

loadCommentsFromServer=（）=>{}

但浏览投诉，不构建：/

ES6箭头功能确实可以解决您的问题。生成错误是因为ES6不支持类属性，并且

loadCommentsFromServer=

是类属性初始值设定项。如果启用，您应该能够执行此操作，它将解决您的问题，而无需在调用

setInterval

时手动

bind

或用新的胖箭头函数包装回调

我认为这是一个参考问题，在谷歌上搜索我发现的 他们建议使用新ES6的类似问题 解决此问题的箭头。然后我尝试使用：

loadCommentsFromServer=（）=>{}

但浏览投诉，不构建：/

---

ES6箭头功能确实可以解决您的问题。生成错误是因为ES6不支持类属性，并且

loadCommentsFromServer=

是类属性初始值设定项。启用，您应该能够做到这一点，它将解决您的问题，而无需手动

绑定

，或者在调用

setInterval

时将回调包装在新的胖箭头函数中。可能重复请参见“常见问题：使用对象方法作为回调/事件处理程序”在建议的副本中。您需要手动绑定它。ES6类不会自动绑定可能的副本，请参见建议副本中的“常见问题：使用对象方法作为回调/事件处理程序”。您需要手动绑定它。ES6课程不会自动关闭谢谢！这就是问题所在，非常清楚地解释到如果您使用类属性并将

loadCommentsFromServer

定义为箭头函数，您实际上不需要在

setInterval

@Aaron中更改这些代码，我个人不建议使用非常早期的语言功能（除非问题是关于他们的）。这增加了解决问题的复杂性，如果功能没有标准化，答案在FuturaBank中就变得毫无用处！这就是问题所在，非常清楚的解释是，如果您使用类属性并将

loadCommentsFromServer

定义为箭头函数，您实际上不需要在

setIn中更改这些代码terval

@Aaron我个人不建议使用非常早期的语言功能（除非问题是专门针对这些功能的）。这会增加解决问题的复杂性，如果这些功能没有标准化，那么答案在将来就毫无用处了