Невозможно прочитать свойство 'map' of undefined

Question

Я следую учебному курсу reactjs, и я продолжаю сталкиваться с проблемой при передаче значения из состояния одного компонента в другой компонент. Ошибка «Невозможно прочитать свойство« map undefined »вызывается при выполнении функции map в компоненте CommentList. Что может заставить опору стать неопределенным при переходе из CommentBox в CommentList?

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

    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"> 
      {/*this.state.data.comments*/} 
      {<CommentList data={this.state.data.comments}/>} 
     </div> 
    ); 
    } 
    }); 

    React.renderComponent(
    <CommentBox url="comments.json" />, 
    document.getElementById('content') 
); 

Answer 1

Прежде всего, установить более безопасный исходные данные:

getInitialState : function() { 
    return {data: {comments:[]}}; 
}, 

и обеспечить ваши данные АЯКС.

Он должен работать, если вы будете следовать выше двух команд, как Demo.

Обновлено: вы можете просто обернуть блок .map с условным оператором.

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

Answer 2

Я думаю, что вы забыли изменить

data={this.props.data} 

в

data={this.state.data} 

в функции визуализации CommentBox. Я сделал ту же ошибку, когда я следил за учебником. Таким образом, все визуализации функция должна выглядеть

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

вместо

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

Answer 3

Вы должны поместить данные перед визуализацией

Должно быть так:

var data = [ 
    {author: "Pete Hunt", text: "This is one comment"}, 
    {author: "Jordan Walke", text: "This is *another* comment"} 
]; 

React.render(
    <CommentBox data={data}/>, 
    document.getElementById('content') 
); 

Вместо это:

React.render(
    <CommentBox data={data}/>, 
    document.getElementById('content') 
); 

var data = [ 
    {author: "Pete Hunt", text: "This is one comment"}, 
    {author: "Jordan Walke", text: "This is *another* comment"} 
];