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從後端（django的）：

{"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，你的數據可能還沒有到達，所以你ne編輯以檢查數據是否準備好，通過這樣做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> 
); 
});