[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。

reactを使って、あるコンポーネントの状態値を別のコンポーネントに渡すために、次のコードを書いています。

// First component
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment){
      return <div><h1>{comment.author}</h1></div>;
    });
    return <div className="commentList">{commentNodes}</div>;
  }
});
// Second component    
var CommentBox = React.createClass({
   getInitialState: function(){
     return {data: []};
   },
   getComments: function(){
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data){ this.setState({data: data}) }.bind(this),
        error: function(xhr, status, err){ console.error(url, status, err.toString()) }.bind(this)
      });
   },
   componentWillMount: function(){
      this.getComments()
   },
   render: function(){
      return <div className="commentBox">{<CommentList data={this.state.data.comments}/>}</div>;
   }
});

React.renderComponent( <CommentBox url="comments.json" />, document.getElementById('content'));

このコードを実行すると、次のようなエラーが発生します。 Cannot read property 'map' of undefined' がスローされます。 map の関数は CommentList コンポーネントが実行されます。

何が原因で prop になります。 undefined から渡すとき CommentBox を CommentList ?

解決方法は？

まず、より安全な初期データを設定します。

getInitialState : function() {
    return {data: {comments:[]}};
},

そして、ajaxデータを確保します。

上記の2つの手順で、以下のようにすればうまくいくはずです。 デモ

更新：.mapブロックを条件文でくくるだけでいいんですね。

if (this.props.data) {
  var commentNodes = this.props.data.map(function (comment){
      return (
        <div>
          <h1>{comment.author}</h1>
        </div>
      );
  });
}