Uncaught TypeError：this.props.data.mapは関数ではありません

Question

私はこのエラーが発生する理由はわかりませんが、this.setState({data: data});になるようにチュートリアルのコードを修正しました。this.setState({data: data.datalist});バックエンド。私はこの答えに従って自分のコードに変更を加えましたが、同じエラーがそのまま続きますReact JS - Uncaught TypeError: this.props.data.map is not a function。

私のバックエンドからJSONを取得するために構成されたチュートリアルからのサンプルコード：

import React from 'react' 
import ReactDOM from 'react-dom' 
import $ from 'jquery' 

var Comment = React.createClass({ 
    rawMarkup: function() { 
    var md = new Remarkable(); 
    var rawMarkup = md.render(this.props.children.toString()); 
    return { __html: rawMarkup }; 
    }, 

    render: function() { 
    return (
     <div className="comment"> 
     <h2 className="commentAuthor"> 
      {this.props.author} 
     </h2> 
     <span dangerouslySetInnerHTML={this.rawMarkup()} /> 
     </div> 
    ); 
    } 
}); 

var CommentBox = React.createClass({ 
    loadCommentsFromServer: function() { 
    $.ajax({cache:false}); 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     success: function(data) { 
     console.log(data.datalist); 
     this.setState({data: data.datalist}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    handleCommentSubmit: function(comment) { 
    var comments = this.state.data; 
    comment.id = Date.now(); 
    var newComments = comments.concat([comment]); 
    this.setState({data: newComments}); 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     type: 'POST', 
     data: comment, 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     this.setState({data: comments}); 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    getInitialState: function() { 
    return {data: []}; 
    }, 
    componentDidMount: function() { 
    this.loadCommentsFromServer(); 
    setInterval(this.loadCommentsFromServer, this.props.pollInterval); 
    }, 
    render: function() { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 
     <CommentList data={this.state.data} /> 
     <CommentForm onCommentSubmit={this.handleCommentSubmit} /> 
     </div> 
    ); 
    } 
}); 

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> 
    ); 
    } 
}); 

var CommentForm = React.createClass({ 
    getInitialState: function() { 
    return {author: '', text: ''}; 
    }, 
    handleAuthorChange: function(e) { 
    this.setState({author: e.target.value}); 
    }, 
    handleTextChange: function(e) { 
    this.setState({text: e.target.value}); 
    }, 
    handleSubmit: function(e) { 
    e.preventDefault(); 
    var author = this.state.author.trim(); 
    var text = this.state.text.trim(); 
    if (!text || !author) { 
     return; 
    } 
    this.props.onCommentSubmit({author: author, text: text}); 
    this.setState({author: '', text: ''}); 
    }, 
    render: function() { 
    return (
     <form className="commentForm" onSubmit={this.handleSubmit}> 
     <input 
      type="text" 
      placeholder="Your name" 
      value={this.state.author} 
      onChange={this.handleAuthorChange} 
     /> 
     <input 
      type="text" 
      placeholder="Say something..." 
      value={this.state.text} 
      onChange={this.handleTextChange} 
     /> 
     <input type="submit" value="Post" /> 
     </form> 
    ); 
    } 
}); 

ReactDOM.render(
    <CommentBox url="/core/get_json" pollInterval={2000} />, 
    document.getElementById('app') 
); 

JSONバックエンド（ジャンゴ）からに：取得

def get_json(request): 

    return JsonResponse({'datalist': [ 
     {'id': 1, 'author': "Pete Hunt", 'text': "This is one comment"}, 
     {'id': 2, 'author': "Jordan Walke", 'text': "This is *another* comment"} 
    ]}) 

ブラウザは、ネットワーク応答の下でJSONを言った：

{"datalist": [{"id": 1, "author": "Pete Hunt", "text": "This is one comment"}, {"id": 2, "author": "Jordan Walke", "text": "This is *another* comment"}]} 

Answer 1

レンダリングでthis.props.dataをすぐに呼び出すと、データがまだ到着していない可能性がありますこれを行うことによってデータが準備されているかどうかをチェックする。this.props.data && this.props.data.map。

var commentNodes = this.props.data && this.props.data.map(function(comment) 
{ 
    return (
    <Comment author={comment.author} key={comment.id}> 
     {comment.text} 
    </Comment> 
); 
});