Ошибка ReactJS с ошибкой "Невозможно прочитать свойство" map "из undefined`"

После учебного пособия по реакции .js У меня есть ошибка: Uncaught TypeError: Cannot read property 'map' of undefined.

Я следил за учебником, но застрял в Извлечение с сервера. Ошибка появляется, когда я подаю комментарийBox с данными url вместо данных JSON с жесткой кодировкой.

/** @jsx React.DOM */

var converter = new Showdown.converter();

var data = [
  { Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!" },
  { Author: "Pete Hunt", Text: "This is one comment" },
  { Author: "Jordan Walke", Text: "This is *another* comment" }
];

var Comment = React.createClass({
  render: function() {
  var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {

    var commentNodes = this.props.data.map(function (comment) {
      return <Comment author={comment.Author}>{comment.Text}</Comment>;
    });

    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>

        <CommentList data={this.props.data} />

        <CommentForm />
      </div>
    );
  }
});

React.renderComponent(
  //<CommentBox data={data}/>,            //this works fine
  <CommentBox url="/comments" />,         //Changing data feet to url produces an error
  document.getElementById('content')
);

Запрос в http://localhost:52581/comments работает и возвращает данные JSON:

[{"Author":"Daniel Lo Nigro","Text":"Hello ReactJS.NET World!"},{"Author":"Pete Hunt","Text":"This is one comment"},{"Author":"Jordan Walke","Text":"This is *another* comment"}]

Любой совет будет большой помощью для меня. Спасибо.

Ответ 1

В CommentBox эта строка является проблемой: <CommentList data={this.props.data} />

У вас больше нет props.data, поскольку вы передаете URL-адрес вместо объекта JS.

Ваш второй работает, потому что вы используете состояние и по умолчанию значение для пустого массива, который по-прежнему может работать на нем.

Ответ 2

У меня также была эта точная проблема - в этом уроке не говорится об этом, но я не думаю, что на самом деле приложение должно правильно загружать данные на этом этапе. Если вы продолжите работу с учебным пособием, вы создадите вызов ajax, используя this.props.url, который загружает данные. Просто FYI для всех, кого можно смутить, просто продолжайте нажимать, все хорошо!

Ответ 3

Это работает.

/** @jsx React.DOM */

var converter = new Showdown.converter();

var data = [
  { Author: "Daniel Lo Nigro 2", Text: "Hello ReactJS.NET World! 2" },
  { Author: "Pete Hunt 2", Text: "This is one comment 2" },
  { Author: "Jordan Walke 2", Text: "This is *another* comment 2" }
];

var Comment = React.createClass({
  render: function() {
  var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {

    var commentNodes = this.props.data.map(function (comment) {
      return <Comment author={comment.Author}>{comment.Text}</Comment>;
    });

    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentWillMount: function() {
    var xhr = new XMLHttpRequest();
    xhr.open('get', this.props.url, true);
    xhr.onload = function() {
      var data = JSON.parse(xhr.responseText);
      this.setState({ data: data });
    }.bind(this);
    xhr.send();
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>

        <CommentList data={this.state.data} />

        <CommentForm />
      </div>
    );
  }
});

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

Ответ 4

Эта ошибка может также произойти, потому что вы пытаетесь внедрить компонент реакции, как если бы это был результат рендеринга, а не сам компонент.

например.

var SampleClass = React.createClass({
...
});

а затем вы попытаетесь использовать его так

<div>
  {SampleClass}
</div>

когда на самом деле вы должны делать что-то вроде этого

<div>
  <SampleClass/>
</div>

Я получал аналогичную ошибку: "Невозможно прочитать свойство" ref "из undefined", и это было проблемой.