Question

我正在尝试学习react.js并在线找到了一个教程。我正在关注来自http://rny.io/rails/react/2014/07/31/reactjs-and-rails.html

的react / rails教程

所有代码都正常工作，直到我完成实施评论表的最后一步。按照所有说明操作后，我的chrome控制台中出现错误，指向此行代码var commentNodes = this.props.comments.map(function (comment, index) {，说明其＆＃34; Uncaught TypeError：undefined不是函数＆＃34;。表单显示并接受输入，但我提交后没有显示任何内容。此外，该教程有点过时，它仍在使用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);

Answer 1

可能的原因是回复的评论不是数组。在此行之前执行console.log(comments)或debugger;：this.setState({comments: comments});检查您的ajax响应并查看注释是否是一系列注释。如果它不是数组，那么这就是你的问题，你可以暂时放一些模拟数据直到你可以使它工作。

React.js：Uncaught TypeError：undefined不是函数

1 个答案: