잡히지 않은 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. 백엔드에서

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 (장고) : 튜토리얼

샘플 코드 내 백엔드에서 JSON을 가져 구성

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

:

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은 네트워크 응답에서 말했다하기

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