Question

我是ReactJS的初学者，只是从the example code on React's official site开始。当我在'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开发工具中查看网络面板时，我看到该页面甚至没有发送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')
  );
});

任何形式的帮助都将受到赞赏。

感谢。

Answer 1

在React Tutorial的页面中，他们在CommentBox React类的componentDidMount属性中执行了一个AJAX请求。

您需要在CommentBox类的componentDidMount函数中为所需数据发出AJAX GET请求。

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

使用'url'属性时，ReactJS不从服务器获取数据

2 个答案: