Share
Ce didacticiel vous expliquera comment utiliser Axios pour récupérer des données, puis comment les manipuler et éventuellement les afficher sur votre page avec une fonctionnalité de filtrage. Vous apprendrez à utiliser la carte, à filtrer et à inclure des méthodes en cours de route. De plus, vous allez créer un composant d'ordre supérieur (HOC) pour gérer l'état de chargement des données extraites à partir du point de terminaison de l'API..
Commençons par une application propre React. Je suppose que vous utilisez créer-réagir-app, et les noms de fichiers seront en conformité avec ses sorties.
Nous avons seulement besoin d'installer le module Axios pour ce tutoriel.
Accédez au répertoire de votre projet à travers la fenêtre du terminal, puis tapez npm installer axios -save afin d'installer Axios pour votre projet localement.
Nous allons utiliser l'API Random User Generator pour récupérer des informations utilisateur aléatoires à utiliser dans notre application..
Ajoutons le module Axios à notre application en l’important dans notre App.js fichier.
importer axios depuis 'axios'
L’API Random User Generator offre de nombreuses options pour créer différents types de données. Vous pouvez consulter la documentation pour plus d'informations, mais pour ce tutoriel, nous allons rester simples.
Nous souhaitons récupérer dix utilisateurs différents. Nous avons uniquement besoin du nom, du nom de famille et d'un identifiant unique, requis pour React lors de la création de listes d'éléments. De plus, pour que l’appel soit un peu plus spécifique, prenons l’option de la nationalité comme exemple..
Ci-dessous, l'API pour laquelle nous ferons un appel.
Notez que je n'ai pas utilisé le identifiant option fournie dans l'API en raison du fait qu'elle renvoie parfois nul pour certains utilisateurs. Donc, juste pour m'assurer qu'il y aura une valeur unique pour chaque utilisateur, j'ai inclus le inscrit option dans l'API.
https://randomuser.me/api/?results=10&inc=name,registered&nat=fr
Vous pouvez copier et coller dans votre navigateur et vous verrez les données retournées au format JSON.
La prochaine étape consiste à passer un appel API via Axios..
Tout d'abord, créons un état pour pouvoir stocker les données récupérées.
À l'intérieur de notre App composant, ajoutez un constructeur de classe puis créez l'état.
constructeur (props) super (props) this.state = utilisateurs: [], magasin: []
Ici vous voyez utilisateurs et le magasin États. L'un sera utilisé à des fins de filtrage et ne sera pas édité, et l'autre contiendra les résultats de filtrage qui seront affichés dans le DOM.
Maintenant, allez-y et créez le composantDidMount () crochet de cycle de vie.
Dans ce crochet de cycle de vie, nous allons récupérer les données, puis en utilisant le carte méthode, nous allons créer de nouvelles données intermédiaires que nous utiliserons à l’intérieur du setState méthode.
Si vous vérifiez le résultat de l'appel de l'API dans votre navigateur, vous verrez qu'il y a premier et dernier paires clé-valeur à l'intérieur du prénom objet mais pas de paire clé-valeur pour un nom complet. Nous allons donc combiner premier et dernier créer un nom complet dans un nouvel objet JavaScript. Notez que JSON et JavaScript Object sont deux choses bien qu’ils fonctionnent fondamentalement de la même manière..
Avançons pas à pas.
Ajoutez le code suivant à votre App composant.
Accentsconagua
composantDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,enregistré&nat=fr') .then (json => console.log (json))Lorsque vous vérifiez la console, vous verrez une sortie d'objet. Si vous ouvrez cet objet, il contient un autre objet nommé Les données, et à l'intérieur des données, il y a un tableau nommé résultats.
Changeons encore le console.log (json).
composantDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,enregistré&nat=fr') .then (json => console.log (json.data.results [0]. name.first))Ici nous avons atteint le nom de la première valeur dans le tableau de résultats.
Maintenant, utilisons la fonction intégrée carte méthode JavaScript pour parcourir chaque élément du tableau et créer un nouveau tableau d'objets JavaScript avec une nouvelle structure.
composantDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,enregistré&nat=fr') .then (json => json.data.results.map (result => ( nom: '$ result.name.first $ result.name.last', id: result.registered)) .then (newData => console.log (newData))Ici, nous avons appelé le carte méthode sur json.data.results, qui est un tableau, puis référencé chaque élément du tableau comme résultat (remarquez la différence singulier / pluriel). Ensuite, en utilisant la paire clé-valeur de chaque objet dans le tableau, nous avons créé un autre objet avec prénom et identifiant paires clé-valeur.
À la fin, nous avons utilisé un autre puis méthode afin de pouvoir se référer à nos nouvelles données. Nous l'avons référé comme nouvelles données, puis nous nous sommes connectés à la console pour voir si tout se passait comme prévu.
Vous devriez voir un nouveau tableau avec des objets ayant prénom et identifiant paires.
Au lieu de consigner le résultat dans la console, nous devons le stocker. Pour ce faire, nous allons utiliser setState.
composantDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,enregistré&nat=fr') .then (json => json.data.results.map (result => ( nom: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => this.setState (utilisateurs: newData, store: newData) ) .catch (error => alert (error))Ici, nous avons initialement défini les deux utilisateurs et le magasin données avec notre nouveau nouvelles données tableau.
Nous avons besoin de deux variables car nous devons stocker les données d'origine et ne jamais les perdre. En utilisant les informations contenues dans le le magasin état, nous pouvons filtrer les données, puis peupler le utilisateurs Etat et le montrer sur la page. Cela sera plus clair lorsque nous implémenterons la fonctionnalité de filtrage..
Last but not least, nous avons ajouté capture pour attraper toutes les erreurs possibles lors de la récupération et afficher l'erreur sous forme de message d'alerte.
L'idée de filtrer est assez simple. Nous avons notre le magasin état, et il conserve toujours les données d'origine sans changer. Puis, en utilisant le filtre fonctionner sur cet état, nous obtenons uniquement les éléments correspondants, puis nous les attribuons au utilisateurs Etat.
this.state.store.filter (item => item.name.toLowerCase (). includes (e.target.value.toLowerCase ()))
le filtre La méthode nécessite une fonction en tant qu'argument, une fonction à exécuter pour chaque élément du tableau. Ici, nous référons chaque élément dans le tableau comme article. Puis on prend le prénom clé de chaque article et le convertir en minuscule afin de rendre notre fonctionnalité de filtrage insensible à la casse.
Après nous avons le prénom clé pour la article, on vérifie si celui-ci comprend la chaîne de recherche que nous avons saisie. comprend est une autre méthode JavaScript intégrée. Nous passons la chaîne de recherche tapée dans le champ de saisie comme argument pour comprend, et il retourne si cette chaîne est incluse dans la variable sur laquelle elle a été appelée. Encore une fois, nous convertissons la chaîne d’entrée en minuscule, de sorte que vous ayez à entrer des majuscules ou des minuscules.
Finalement, la méthode de filtrage renvoie les éléments correspondants. Nous prenons donc simplement ces éléments et les stockons dans le utilisateurs Etat à travers setState.
Ci-dessous, vous trouverez la version finale de la fonction que nous avons créée..
filterNames (e) this.setState (utilisateurs: this.state.store.filter (item => item.name.toLowerCase ().) includes (e.target.value.toLowerCase ()))
Bien que, pour ce petit exemple, nous puissions tout mettre dans le App composant, profitons de React pour créer quelques composants fonctionnels / sans état.
Ajoutons la structure suivante à la rendre méthode du App composant.
render () const users = this.state return ()LISTE DE NOMthis.filterNames (e) />
Pour le moment, nous nous concentrerons uniquement sur les fonctionnalités. Plus tard, je fournirai le fichier CSS que j'ai créé.
Notez que nous avons le searchFunc support pour le Barre de recherche composant et le noms d'utilisateur support pour le liste composant.
Notez que nous utilisons le utilisateurs Etat au lieu de le magasin Etat pour montrer les données parce que le utilisateurs l'état est celui qui contient les résultats filtrés.
Ce composant est assez simple. Il ne prend que le filterNames fonctionne comme un accessoire et appelle cette fonction lorsque le champ de saisie change.
import Réagir de 'réagir' const SearchBar = props => return () exporter la barre de recherche par défaut
Celui-ci listera simplement les noms des utilisateurs.
importer Réagir, Composant à partir de 'réagir' importer LoadingHOC à partir de './LoadingHOC' importer '… /styles/main.css' const List = (props) => const usernames = props return (
Ici, nous avons encore utilisé le carte méthode pour obtenir chaque élément du tableau et créer un article hors de celui-ci. Notez que lorsque vous utilisez carte pour créer une liste d’articles, vous devez utiliser un clé afin que React puisse suivre chaque élément de la liste.
Notez que nous avons emballé liste avec un autre composant nommé ChargementHOC avant de l'exporter. Voici comment fonctionnent les composants d'ordre supérieur (HOC).
Ce que nous avons fait ici est de transmettre notre composant comme argument à un autre composant avant de l'exporter. Donc ça ChargementHOC composant sera rehaussant notre composant avec de nouvelles fonctionnalités.
Comme je l'ai brièvement expliqué précédemment, un HOC prend un composant en tant qu'entrée puis exporte une version améliorée du composant en entrée..
import React, Component from 'react' import spinner from '… /spinner.gif' const LoadingHOC = (WrappedState) => return (la classe LoadingHOC est une extension de Component render () return this.props.usernames.length == = 0 ?:
) Exporter LoadingHOC par défaut
À l'intérieur du HOC, nous pouvons accéder directement aux accessoires du composant d'entrée. Donc, nous vérifions simplement si la longueur de la noms d'utilisateur prop est 0 ou pas. Si c'est 0, cela signifie que les données n'ont pas encore été récupérées car il s'agit d'un tableau vide par défaut. Nous montrons donc simplement un fichier GIF spinner que nous avons importé. Sinon, nous montrons simplement le composant d'entrée lui-même.
Il est importé afin de ne pas oublier de renvoyer les accessoires et les états au composant d'entrée avec un opérateur spread. Sinon, votre composant en serait privé.
Ci-dessous, vous trouverez le fichier CSS spécifique à cet exemple..
body, html -webkit-font-lissage: antialiasé; marge: 0; rembourrage: 0; couleur de fond: # f1f1f1; famille de polices: 'Raleway', sans-serif; -webkit-text-size-adjust: 100%; body display: flex; justifier-contenu: centre; taille de police: 1rem / 16; marge supérieure: 50 px; li, ul list-style: none; marge: 0; rembourrage: 0; ul margin-top: 10px; li taille de la police: 0.8rem; marge inférieure: 8px; text-align: center; couleur: # 959595; li: dernier type de type margin-bottom: 50px; .Card font-size: 1.5rem; poids de police: gras; affichage: flex; direction de flexion: colonne; align-items: centre; largeur: 200px; border-radius: 10px; couleur de fond: blanc; box-shadow: 0 5px 3px 0 #ebebeb; .header position: relative; taille de police: 20px; marge: 12px 0; couleur: # 575757; .header :: after content: "; position: absolute; left: -50%; bottom: -10px; width: 200%; height: 1px; background-color: # f1f1f1; .searchBar text-align: center; margin: 5px 0; border: 1px solid # c4c4c4; hauteur: 20px; color: # 575757; border-radius: 3px; .searchBar: focus contour-width: 0; .searchBar :: placeholder color: #dadada; .isLoading margin: 30px 0; width: 150px; filter: opacité (0,3);
Tout au long de ce tutoriel, nous avons rapidement examiné l'API Random User Generator en tant que source de données aléatoires. Nous avons ensuite récupéré les données d’un noeud final d’API et restructuré les résultats dans un nouvel objet JavaScript avec le carte méthode.
Il fallait ensuite créer une fonction de filtrage avec le filtre et comprend méthodes. Enfin, nous avons créé deux composants différents et amélioré l’un d’eux avec un composant d’ordre supérieur (HOC) en introduisant un indicateur de chargement lorsque les données ne sont pas encore disponibles..
React a acquis une popularité croissante au cours des deux dernières années. En fait, nous avons un certain nombre d’articles sur Envato Market qui sont disponibles à l’achat, à la révision, à la mise en oeuvre, etc. Si vous recherchez des ressources supplémentaires autour de React, n'hésitez pas à les consulter..
