Невозможно прочитать карту свойств 'w90>

Я следую учебному курсу reactjs, и я продолжаю сталкиваться с проблемой при передаче значения из состояния одного компонента в другой компонент. Ошибка 'Невозможно прочитать свойство' map 'из undefined' вызывается при выполнении функции map в компоненте CommentList. Что может заставить prop стать undefined при переходе из 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')
  );

Ответы

Ответ 1

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

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

И обеспечьте свои данные ajax.

Это должно сработать, если вы выполните две инструкции, например Demo.

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

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

Ответ 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>
  );

Ответ 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"}
];