ReactJS не извлекает данные с сервера при использовании атрибута 'url'

Я начинаю ReactJS и начинаю с пример кода на официальном сайте React. Когда я пытаюсь выполнить код в разделе 'Fetching from the server', я не могу заставить его работать.

Я пробовал как относительный путь

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

и абсолютный путь

React.render(
  <CommentBox url="http://localhost/path/to/data.json" />,
  document.getElementById('content')
);

Но none из них работает правильно. Когда я проверил панель "Сеть" в инструменте Chrome dev, я увидел, что страница даже не отправила запрос для data.json. Таким образом, я получил ошибку Cannot read property 'comments' of undefined.

больше кода:

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        from {this.props.author} <br/>
        {this.props.children}
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.comments.map(function(comment){
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
    <div className="comment-list">
      {commentNodes}
    </div>
    );
  }
});

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

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="comment-box">
        <h1>Comments</h1>
        <CommentList comments={this.props.data.comments} />
        <CommentForm />
      </div>
    );
  }
});

// ==========  This won't work  ===========
// React.render(
//   <CommentBox url="./data/data.json" />,
//   document.getElementById('content')
// );

// =========== This works. ===========
$.ajax({
  type: "GET",
  url: "./data/data.json",
  dataType: "json",
}).done(function(res){
  React.render(
    <CommentBox data={res} />,
    document.getElementById('content')
  );
});

Любая помощь будет оценена.

Спасибо.

Ответ 1

Немного ниже страницы в этом учебном пособии по React, они выполняют запрос AJAX в свойстве componentDidMount класса CommentBox React.

Вам нужно сделать запрос AJAX GET для данных, которые вы хотите в функции componentDidMount, в вашем классе CommentBox.

Ответ 2

React docs рекомендует выполнить запрос GET в componentDidMount() и сохранить данные в состоянии.

Сначала инициализируйте переменные данных:

getInitialState: function() {
  return {
    dataVar1: ''
  };
}

Затем извлеките данные с помощью $.get():

componentDidMount: function() {
  $.get('URL-TO-FETCH-DATA-FROM', function(result) {
    if (this.isMounted()) {
      this.setState({
        dataVar1: result
      });
    }
  }.bind(this));
}

где $.get - это сокращенная функция jQuery AJAX. В render() затем могут отображаться данные:

render: function() {
  return (
    <div>
      {this.state.dataVar1}
    </div>
  );
}