如何在React中加载AJAX

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图将我的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？

回答：

，要使用AJAX提取数据，您有几种选择：

  • 在提取API，将工作在开箱某些浏览器（可以使用填充工具得到它在其他浏览器的工作，以及）。

  • 用于数据提取的库（通常在所有现代浏览器中都可以使用）。Facebook建议以下内容：

    • 超级代理

    • 要求

    • 反应阿贾克斯

    • 轴距

    • 请求

，您需要在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
);

以上是 如何在React中加载AJAX 的全部内容， 来源链接： utcz.com/qa/397797.html

回到顶部