Javascript React.js:Uncaught TypeError:undefined不是函数

我正在学习react.js，并在网上找到了一个教程。我正在学习来自的react/rails教程

在我实现注释表单的最后一步之前，所有代码都运行良好。按照所有说明操作后，我在chrome控制台中发现一个错误，指向这行代码

var commentNodes=this.props.comments.map（function（comment，index）{

说它的“Uncaught TypeError:undefined不是函数”。表单显示并接受输入，但在我提交后没有显示任何内容。此外，教程有点过时，它仍在使用

React.renderComponent

，我在阅读文档后将其更改为

React.render

。是否还有一些不推荐的代码我遗漏了？或者有人能帮助我或告诉我哪里做错了？ 提前谢谢

var Comment = React.createClass({
      render: function () {
        return (
          <div className="comment">
            <h2 className="commentAuthor">
              {this.props.author}
            </h2>
              {this.props.comment}
          </div>
      );
  }
});

var CommentList = React.createClass({
  render: function () {
    var commentNodes = this.props.comments.map(function (comment, index) {
      return (
        <Comment author={comment.author} comment={comment.comment} key={index} />
        );
    });

    return (
      <div className="commentList">
        {commentNodes}
      </div>
      );
  }
});

var CommentBox = React.createClass({
  getInitialState: function () {
    return {comments: []};
  },
  componentDidMount: function () {
    this.loadCommentsFromServer();
  },
  loadCommentsFromServer: function () {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function (comments) {
        this.setState({comments: comments});
      }.bind(this),
      error: function (xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    var comments = this.state.comments;
    var newComments = comments.concat([comment]);
    this.setState({comments: newComments});
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: {"comment": comment},
      success: function(data) {
        this.loadCommentsFromServer();
      }.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 comments={this.state.comments} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
      </div>
      );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function() {
    var author = this.refs.author.getDOMNode().value.trim();
    var comment = this.refs.comment.getDOMNode().value.trim();
    this.props.onCommentSubmit({author: author, comment: comment});
    this.refs.author.getDOMNode().value = '';
    this.refs.comment.getDOMNode().value = '';
    return false;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="comment" />
        <input type="submit" value="Post" />
      </form>
      );
  }
});

var ready = function () {
  React.render(
    <CommentBox url="/comments.json" />,
    document.getElementById('comments')
  );
};

$(document).ready(ready);

var Comment=React.createClass({
渲染：函数（）{
返回(
{this.props.author}
{this.props.comment}
);
}
});
var CommentList=React.createClass({
渲染：函数（）{
var commentNodes=this.props.comments.map（函数（注释，索引）{
返回(
);
});
返回(
{commentNodes}
);
}
});
var CommentBox=React.createClass({
getInitialState:函数（）{
返回{注释：[]}；
},
componentDidMount:函数（）{
this.loadCommentsFromServer（）；
},
loadCommentsFromServer:函数（）{
$.ajax({
url:this.props.url，
数据类型：“json”，
成功：功能（评论）{
this.setState（{comments:comments}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
handleCommentSubmit:函数（注释）{
var注释=this.state.comments；
var newComments=comments.concat（[comment]）；
this.setState（{comments:newComments}）；
$.ajax({
url:this.props.url，
数据类型：“json”，
键入：“POST”，
数据：{“注释”：注释}，
成功：功能（数据）{
this.loadCommentsFromServer（）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
渲染：函数（）{
返回(
评论
);
}
});
var CommentForm=React.createClass({
handleSubmit:function（）{
var author=this.refs.author.getDOMNode（）.value.trim（）；
var comment=this.refs.comment.getDOMNode（）.value.trim（）；
this.props.onCommentSubmit（{作者：作者，评论：评论}）；
this.refs.author.getDOMNode（）.value=''；
this.refs.comment.getDOMNode（）.value=''；
返回false；
},
render:function（）{
返回(
);
}
});
var ready=函数（）{
反应(
,
document.getElementById（'comments'）
);
};
$（文件）。就绪（就绪）；

可能的原因是返回的注释不是数组。在此行之前执行

控制台.log（comments）

或

调试器；

：

this.setState（{comments:comments}）；

检查ajax响应并查看注释是否是注释数组。如果不是数组，那么这就是您的问题所在，您可以暂时将一些模拟数据放在其中，直到可以使用为止。

您是否有服务器设置返回包含名为注释列表的JSON数据对象？@ChrisHawkes谢谢或者您的回复。我检查了我的控制器等，结果是该应用程序只缺少一个单词。

响应

，请参阅下面的答案。谢谢！谢谢！您的响应帮助了我。我能够更好地调试我的问题，结果它被设置了两次，我需要在代码中添加

响应

。

this.setState({comments:response.comments}）；

我的一位同事向我指出了这一点。再次感谢！乔纳森，当我获得足够的声誉时，我会回来投票支持你的答案。干杯！