私は、次のReactJSコード持っている状態で反応

Question

からデータを取得できません：getInitialState()で

var CommentList = React.createClass({ 

     render: function(){ 

     var commentNodes = this.props.data.map(function(comment){ 

      return (
      <Comment author={comment.author} key={comment.id}> 
       {comment.text} 
      </Comment> 

     ); 

     }); 

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

     } 

    }); 

そしてCommentBoxで....

var CommentBox = React.createClass({ 

     loadCommentFromServer: function() { 

     $.ajax({ 
      url: this.props.url, 
      dataType: 'json', 
      cache: false, 
      success: function(data) { 

      this.setState({ 
       data: data 
      }); 

      }.bind(this), 

      error: function(xhr, status, err) { 

       console.error(this.props.url, status, err.toString()); 

     }.bind(this) 

     }); 

     }, 

    }, 
    getInitialState: function() { 

     return { 
     data: [] 
     }; 

    }, 

    componentDidMount: function() { 

     this.loadCommentFromServer(); 

     setInterval(this.loadCommentFromServer, this.props.pollInterval); 

    }, 

    render: function() { 

     return ( 
     <div className = "commentBox" > 
      <h1> Comments </h1> 
      <CommentList data ={ this.state.data } /> 
      <CommentForm /> 
     </div> 
    ); 

    } 

}); 

を、私はすでにデータ用とに値を割り当てますCommentListは、stateから値を取得するプロパティデータも追加します。私が実行しようとすると

、私はこのエラーを得た：

Cannot read property 'map' of undefined in CommentList.

Answer 1

あなたは、単にあなたが戻ってjQuery.ajaxから必要なデータを取得されていませんように見えます。

 success: function(data) { 
     // before setting state, log here and find out what data is 
     // it could need to be turned into JSON? data = data.toJSON(); 
     // or simply this to be safe 
     data = data || []; 

     this.setState({ 
      data: data 
     }); 

     }