réagir AJAX

Réagir données des composants peuvent être obtenus par la méthode componentDidMount Ajax, tandis que l'accès à la base de données à partir du serveur peut stocker des données dans l'état, et puis re-rendu méthode this.setState UI.

Lors de l'utilisation asynchrone chargement de données, le déchargement assemblage avant utilisation componentWillUnmount pour annuler les demandes en suspens.

L'exemple suivant montre Obtenir la dernière essentiel Github utilisateurs action Description:

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} 用户最新的 Gist 共享地址：
        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
      </div>
    );
  }
});

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

Essayez »

Le code ci-dessus utilise jQuery Ajax demande est terminée.