web-dev-qa-db-fra.com

Comment charger AJAX en réaction

J'essaie d'obtenir mon résultat JSON dans mon code de réaction

Le code ressemble à ceci

_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} />);
  });
}

Comment puis-je récupérer AJAX dans ceci?

ajaxreactjs
6
Christoffer

First, pour récupérer les données avec AJAX, vous avez quelques options:

Next, vous devez l’utiliser quelque part dans votre composant React. Cela dépend de votre application et de votre composant, mais généralement je pense qu'il y a deux scénarios à considérer:

  1. Récupération des données initiales (par exemple, une liste d’utilisateurs).
  2. Récupération de données en réponse à une interaction de l'utilisateur (par exemple, en cliquant sur un bouton Pour ajouter d'autres utilisateurs).

La récupération des données initiales doit être effectuée selon la méthode du cycle de vie componentDidMount() . À partir de Documents de réaction :

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. Bien que cela fonctionne très bien, ce n’est probablement pas une bonne idée d’utiliser une aussi grande bibliothèque (en termes de taille) pour effectuer une tâche aussi petite. 

Récupération de données en réponse à, par exemple, une action peut être faite 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
);
9
tobiasandersen

Jetons un coup d'oeil sur l'API de récupération: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Disons que nous voulons extraire une simple liste dans notre composant.

export default MyComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            lst: []
        };

        this.fetchData = this.fetchData.bind(this);
    }

    fetchData() {
        fetch('url')
        .then((res) => {
            return res.json();
        })
        .then((res) => {
            this.setState({ lst: res });
        });
    }
}

Nous récupérons les données du serveur, nous obtenons le résultat du service, nous convertissons en json, puis nous définissons le résultat qui sera le tableau dans l'état.

3
Pachu

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

import React from 'react';

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