La plupart des applications que nous créons aujourd'hui consomment des données provenant de sources externes via des API. Ils récupèrent les données d'un serveur et les affichent dans leur interface utilisateur.
À l'aide de React, vous pouvez créer un hook personnalisé pour récupérer des données à partir d'une API. Étant donné une URL, ce crochet renverra un objet contenant les données et un message d'erreur facultatif. Vous pouvez ensuite utiliser ce crochet dans un composant.
Création d'un hook de réaction personnalisé
Commencez par créer un nouveau fichier appelé useFetch.js. Dans ce fichier, créez une fonction appelée useFetch() qui accepte une chaîne d'URL en tant que paramètre.
constante useFetch = (url) => {
}
Le crochet doit faire l'appel API immédiatement après son appel. Vous pouvez utiliser le crochet useEffect() pour ça.
Pour les appels d'API réels, utilisez l'API de récupération. Cette API est une interface basée sur des promesses qui vous permet de faire des requêtes et de recevoir des réponses via HTTP de manière asynchrone.
Dans le crochet personnalisé useFetch(), ajoutez ce qui suit.
importer { useEffect, useState } de "réagir";constante useFetch = (url) => {
constante [données, setdata] = useState(nul);
constante [chargement, setloading] = useState(vrai);
const [erreur, seterror] = useState("");useEffet(() => {
chercher (url)
.then((res) => res.json())
.then((données) => {
semer la terreur(Les données.Erreur)
setdata(Les données.plaisanter)
setloading(faux)
})
}, [URL]);revenir { données, chargement, erreur } ;
};
exporterdéfaut useFetch ;
Dans ce hook, vous initialisez d'abord l'état de trois valeurs :
- data: contient la réponse de l'API.
- error: Contient un message d'erreur si une erreur se produit.
- chargement: contient une valeur booléenne qui indique s'il a récupéré les données de l'API. Initialise l'état de chargement à true. Une fois que l'API a renvoyé des données, définissez-la sur false.
Le crochet useEffect() prend la chaîne d'URL comme argument. Cela permet de s'assurer qu'il s'exécute chaque fois que l'URL change.
La fonction useFetch() renverra un objet contenant les données, le chargement et les valeurs d'erreur.
Utilisation d'un hook personnalisé React
Pour utiliser le hook personnalisé useFetch() que vous venez de créer, commencez par l'importer :
constante useFetch = exiger(""./useFetch")
Utilisez-le ensuite comme suit :
constante {données, chargement, erreur} = useFetch (url)
Pour illustrer, considérez le composant Jokes suivant :
constante Blagues = () => {
URL constante = "<https://sv443.net/jokeapi/v2/joke/Programming? genre=simple>";
constante { données, chargement, erreur } = useFetch (url);si (Chargement en cours) revenir (
<div>Chargement...</div>
)revenir (
<div>
{Erreur &&<div>{Erreur}</div>}
{Les données &&<div>{<div>{Les données}</div>}</div>}
</div>
);
};
exporterdéfaut Blagues;
Il appelle le hook useFetch() avec l'URL de l'API blagues et reçoit les valeurs de données, de chargement et d'erreur.
Pour rendre le composant Blagues, vérifiez d'abord si Loading est vrai. Si c'est le cas, affichez une instruction "Chargement en cours...", sinon affichez les données et le message d'erreur, le cas échéant.
Pourquoi utiliser des hooks React personnalisés ?
Tout comme vous avez utilisé le hook personnalisé useFetch() dans ce composant, vous pouvez le réutiliser dans d'autres composants. C'est la beauté d'externaliser la logique dans les crochets au lieu de l'écrire dans chaque composant.
Les crochets sont une fonctionnalité puissante de React que vous pouvez utiliser pour améliorer la modularité de votre code.