Quelle est la bonne façon de le faire appel de l’API en js réagir ?

Question

J’ai récemment déménagé de moment angulaire à ReactJs. J’utilise jQuery pour les appels API. J’ai une API qui retourne une liste aléatoire de l’utilisateur qui doit être imprimé dans une liste.

Je ne sais pas comment écrire mes appels API. Ce qui est conseillé pour cela ?

J’ai essayé ce qui suit, mais je ne reçois pas de n’importe quelle sortie. Je suis ouvert à mettre en œuvre des bibliothèques d’API alternatives si nécessaire.

Voici mon code :

Answer 1

Dans ce cas, vous pouvez faire appel ajax à l’intérieur de `` , puis mise à jour``

Answer 2

Vous pouvez consulter l' Architecture de Flux. J’ai aussi vous recommandons React-Redux mise en œuvre. Mettez vos appels d’api dans vos actions. Il est beaucoup plus plus propre que les mettre tous dans le composant.

Les actions sont des sortes de méthodes d’assistance que vous pouvez appeler pour changer votre état de l’application ou de faire des appels d’api.

Answer 3

Utilisation méthode dans à jour état. comme ci-dessous

....

....

Answer 4

Cette discussion a été un moment et @Alexandre T. la réponse fournit un bon guide à suivre pour qui juste à réagir comme moi. Et je vais partager d'autres de savoir comment cette discussion pour probablement un problème commun qui newbie peut faire face au début.

componentWillReceiveProps(nextProps), à partir de la documentation officielle :

Si vous avez besoin de mettre à jour l'état en réponse à soutenir les changements (pour exemple, pour réinitialiser), vous pouvez comparer ce.des accessoires et de la nextProps et effectuer les transitions de l'état à l'aide de ce.setState() dans cette méthode.

On pourrait en conclure que c'est ici le lieu de gérer notre paramètres qui peuvent venir de l'url ou des accessoires de composant parent, ont appel d'API, et la mise à jour de l'état.

Base sur @Alexandre T. exemple:

export default class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {person: []};
  }

  componentDidMount() {
   //For our first load. 
   this.UserList(this.props.group); //maybe something like "groupOne"
  }

  componentWillReceiveProps(nextProps) {
    // Assuming parameter comes from url.
    // let group = window.location.toString().split("/")[*indexParameterLocated*];
    // this.UserList(group);

    // Assuming parameter comes from props that from parent component.
    let group = nextProps.group; // Maybe something like "groupTwo" 
    this.UserList(group);
  }

  UserList(group) {
    $.getJSON('https://randomuser.me/api/' + group)
      .then(({ results }) => this.setState({ person: results }));
  }

  render() {
    return (...)
  }
}

---

Mise à jour

componentWillReceiveProps() serait obsolète.

Ici ne sont que quelques méthodes (tous dans la Doc) dans le cycle de vie qui, je pense, serait liée au déploiement de l'API dans le cas général:

En se référant au schéma ci-dessus:

• Déployer des API en componentDidMount()

  Le bon scénario pour avoir les appels de l'API est ici que le contenu de la réponse de l'API) de ce composant sera statique, componentDidMount() déclencher une seule fois alors que le composant est un montage, même les nouveaux accessoires être transmis de la mère de composant ou d'avoir des actions à mener re-rendering.
  Le composant ne manquez pas de différence pour les rendre à nouveau mais pas monter de nouveau.
  Citation de doc:

Si vous avez besoin de charger des données à partir d'un point de terminaison distant, c'est un bon endroit pour instancier la demande du réseau.

---

• Déployer des API en static getDerivedStateFromProps(nextProps, prevState)

Nous devrions remarquer qu'il existe deux types de composant de mise à jour, setState() dans la composante serait pas mener cette méthode pour déclencher, mais re-rendu ou de nouveaux accessoires de composant parentne. Nous avons pu constaté que cette méthode feux de lors du montage.

C'est un bon endroit pour déployer API si nous voulons utiliser le composant en cours comme un modèle, et les nouveaux paramètres de l'API sont des accessoires venant de composant parent.
Nous recevons réponse différente à partir de l'API et de retour de nouvelle - state ici pour modifier le contenu de ce composant.

Par exemple:
Nous avons une liste déroulante pour les différentes Voitures dans le composant parent, ce composant doit montrer les détails de celle sélectionnée.

---

• Déployer des API en componentDidUpdate(prevProps, prevState)

Diffèrent static getDerivedStateFromProps(), cette méthode est appelée immédiatement après chaque affichage à l'exception du premier rendu. Nous pourrions avoir l'appel de l'API et de rendre différence dans un composant.

Étendre l'exemple précédent:
Le composant de montrer Voiture de détails peut-contient une liste de série de cette voiture, si vous souhaitez vérifier la 2013 la production, nous pouvons cliquez sur ou sélectionnez ou ... l'élément de liste pour mener une première setState() pour refléter ce comportement (tels que la mise en surbrillance l'élément de liste) dans cette partie, et dans le suivant, componentDidUpdate() nous envoyer notre demande avec de nouveaux paramètres (état). Après l'obtention de la réponse, nous setState() nouveau pour le rendu du contenu différent de la Voiture de détails. Pour prévenir les suivantes componentDidUpdate() provoque le débordement de la boucle, nous avons besoin de comparer l'état par l'utilisation de l' prevStateau début de cette méthode pour décider si nous les envoyer à l'API, et de rendre le nouveau contenu.

Cette méthode pouvait être utilisée comme static getDerivedStateFromProps() avec des accessoires, mais besoin de gérer les changements d' props par l'utilisation de l' prevProps. Et nous avons besoin de coopérer avec d' componentDidMount() pour la poignée initiale de l'appel d'API.

Citation de doc:

... C'est également un bon endroit pour faire des demandes de réseau aussi longtemps que vous comparer l'état actuel de accessoires précédente accessoires ...

Answer 5

Je voudrais que vous ayez un coup d'oeil à redux http://redux.js.org/index.html

Ils ont très bien défini la façon de gérer les appels asynchrones ie appels de l'API, et au lieu d'utiliser jQuery pour les appels API, je voudrais vous recommandons d'utiliser fetch ou demande de packages npm, fetch est actuellement pris en charge par les navigateurs modernes, mais d'une cale d'épaisseur est également disponible pour le côté serveur.

Il y a aussi une autre incroyable package superagent, qui a beaucoup beaucoup d'options au moment de faire une demande d'API et il est très facile à utiliser.