如何在React中加载AJAX [英] How to load AJAX in react

问题描述

我正在尝试将json结果放入我的反应代码中

Im trying to get my json result into my react code

代码如下所示

_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?

How do i fetch AJAX into this?

推荐答案

首先，要使用AJAX提取数据，您有几种选择:

First, to fetch the data using AJAX, you have a few options:

• 获取API ，该方法可以解决某些浏览器中的框(您也可以使用polyfill使其在其他浏览器中正常工作).有关示例实现，请参见此答案.
• 用于数据提取的库(通常可在所有现代浏览器中使用). Facebook建议以下内容:
  • superagent
  • reqwest
  • 反应-ajax
  • axios
  • 请求
  • The Fetch API, which will work out of the box in some browsers (you can use a polyfill to get it working in other browsers as well). See this answer for an example implementation.
  • A library for data fetching (which generally work in all modern browsers). Facebook recommends the following:
    • superagent
    • reqwest
    • react-ajax
    • axios
    • request

    下一步，您需要在React组件中的某处使用它.在何处以及如何执行此操作将取决于您的特定应用程序和组件，但是通常我认为有两种情况需要考虑:

    Next, you need to use it somewhere in your React component. Where and how you do this will depend on your specific application and component, but generally I think there's two scenarios to consider:

    1. 获取初始数据(例如用户列表).
    2. 根据某些用户互动(例如，点击按钮以添加更多用户).

    获取初始数据应在生命周期方法 componentDidMount() .从反应文档:

    Fetching initial data should be done in the life-cycle method componentDidMount(). From the 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来获取数据.尽管这很好用，但使用这么大的库(就大小而言)执行这么小的任务可能不是一个好主意.

    Here they use jQuery to fetch the data. While that works just fine, it's probably not a good idea to use such a big library (in terms of size) to perform such a small task.

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

    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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！