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

質問

を追っています。 reactjs チュートリアルで、次のような問題に遭遇します。
あるコンポーネントの状態から別のコンポーネントに値を渡す .

エラー Cannot read property 'map' of undefined' がスローされます。 map の関数を使用します。 CommentList コンポーネントが実行されます。

何が原因で prop になります。 undefined から渡すとき CommentBox の中に入っています。 CommentList?

// 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'));

解決するには？

まず、安全な初期データを多めに設定します。

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

上記の2つの手順に従って、以下のように動作するはずです。 デモ

更新：.mapブロックを条件文で囲むだけでOKです。

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