React.js: Uncaught TypeError: undefined не является функцией

Question

Я пытаюсь узнать response.js и нашел учебник онлайн. Я следил за инструкцией по реагированию/рельсам от http://rny.io/rails/react/2014/07/31/reactjs-and-rails.html

Весь код работал нормально до тех пор, пока я не добрался до последнего шага, реализующего форму комментария. После выполнения всех инструкций я получаю сообщение об ошибке в моей консоли 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); 

Answer 1

Вероятная причина в том, что комментарии, возвращавшиеся не является массивом. Сделайте console.log(comments) или debugger; перед этой строкой: this.setState({comments: comments});, чтобы проверить ваш ответ ajax и посмотреть, есть ли комментарии в виде массива комментариев. Если это что-то другое, кроме массива, то это ваша проблема, вы можете просто добавить некоторые макетные данные там до тех пор, пока вы не сможете получить эту работу.