如何在响应中加载AJAX

Question

我试图让我的json结果进入我的反应代码

代码如下所示

_getComments() {

 const commentList = "AJAX JSON GOES HERE"

return commentList.map((comment) => {
  return ( 
           <Comment
           author={comment.author}
           body={comment.body}
           avatarUrl={comment.avatarUrl}
           key={comment.id} />);
  });
}

我如何获取AJAX？

Answer 1

首先,要使用AJAX获取数据,您有以下几种选择:

• 在提取API,这将制定出在框中的某些浏览器(可以使用填充工具得到它在其他浏览器的工作,以及).有关示例实现,请参阅此答案.
• 用于数据获取的库(通常适用于所有现代浏览器).Facebook推荐以下内容:
  • 的SuperAgent
  • reqwest
  • 反应的Ajax
  • 爱可信
  • 请求

接下来,您需要在React组件中的某个位置使用它.您在何处以及如何执行此操作取决于您的具体应用和组件,但通常我认为有两种情况需要考虑:

1. 获取初始数据(例如用户列表).
2. 获取数据以响应某些用户交互(例如,单击按钮以添加更多用户).

获取初始数据应该在生命周期方法中完成componentDidMount().来自React Docs:

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);

在这里,他们使用jQuery来获取数据.虽然这样做很好,但是使用这么大的库(在大小方面)执行这么小的任务可能不是一个好主意.

获取数据以响应例如动作可以这样做:

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      users: []
    };
  },

  componentWillUnmount: function() {
    this.serverRequest && this.serverRequest.abort();
  },

  fetchNewUser: function () {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      var users = this.state.users
      users.push(lastGist.owner.login)
      this.setState({ users });
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.users.map(user => <div>{user}</div>)}
        <button onClick={this.fetchNewUser}>Get new user</button>
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);