Comment charger en AJAX à réagir

Première, pour extraire les données à l'aide d'AJAX, vous avez quelques options:

• La Chercher de l'API, qui fonctionnent hors de la boîte dans certains navigateurs (vous pouvez utiliser un polyfill pour le faire fonctionner dans d'autres navigateurs aussi bien). Voir cette réponse pour un exemple de mise en œuvre.
• Une bibliothèque pour la récupération de données (qui fonctionnent généralement dans tous les navigateurs modernes). Facebook recommande suivantes:
  • superagent
  • reqwest
  • réagir-ajax
  • axios
  • demande

Prochaine, vous avez besoin de l'utiliser quelque part dans votre Réagissent composant. Où et comment vous faites cela dépendra de votre application spécifique et de composants, mais en général, je pense qu'il y a deux scénarios à prendre en considération:

1. De l'extraction de données initiales (par exemple, une liste des utilisateurs).
2. De l'extraction de données en réponse à une intervention de l'utilisateur (par exemple en cliquant sur un
   pour ajouter d'autres utilisateurs).

De l'extraction de données initiales devrait être fait dans le cycle de vie de la méthode componentDidMount(). À partir de la Réagir 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
);

Ici, ils utilisent jQuery pour récupérer les données. Tout qui fonctionne très bien, il est probablement pas une bonne idée de l'utiliser comme une grande bibliothèque (en termes de taille) pour effectuer une telle tâche.

De l'extraction de données en réponse par exemple à une action peut être fait comme ceci:

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

Vous pouvez utiliser jQuery.get ou jQuery.ajax dans componentDidMount:

import React from 'react';

export default React.createClass({
...
    componentDidMount() {
        $.get('your/url/here').done((loadedData) => {
            this.setState({data: loadedData});
    });
...
}