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

Question

我是 ReactJS 的初学者，刚开始使用 the example code on React's official site. When I'm trying the code in section '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 教程的页面下方一点点，他们在 CommentBox React class.

的 componentDidMount 属性中执行了一个 AJAX 请求

您需要在 CommentBox class.

的 componentDidMount 函数中对您想要的数据发出 AJAX GET 请求

Answer 2

React docs 建议在 componentDidMount() 中执行 GET 请求并将数据存储在状态中。

首先，初始化数据变量：

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 shorthand 函数。在 render() 中可以显示数据：

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

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

ReactJS not fetching data from server when using 'url' attribute

javascript

reactjs