La maggior parte delle applicazioni che creiamo oggi consumano dati da fonti esterne tramite API. Prelevano i dati da un server e li visualizzano nella loro interfaccia utente.
Usando React, puoi creare un hook personalizzato per recuperare i dati da un'API. Dato un URL, questo hook restituirà un oggetto contenente i dati e un messaggio di errore facoltativo. È quindi possibile utilizzare questo hook in un componente.
Creazione di un gancio di reazione personalizzato
Inizia creando un nuovo file chiamato useFetch.js. In questo file, crea una funzione chiamata useFetch() che accetta una stringa URL come parametro.
cost useFetch = (url) => {
}
Il gancio dovrebbe effettuare la chiamata API subito dopo che è stato chiamato. Puoi usare il hook useEffect() per questo.
Per le chiamate API effettive, usa l'API di recupero. Questa API è un'interfaccia basata su promesse che consente di effettuare richieste e ricevere risposte su HTTP in modo asincrono.
Nell'hook personalizzato useFetch(), aggiungi quanto segue.
importare { useEffect, useState } da "reagire";cost useFetch = (url) => {
cost [data, setdata] = useState(nullo);
cost [caricamento, caricamento in corso] = useState(VERO);
const [errore, seterror] = useState("");useEffect(() => {
recuperare (URL)
.quindi((ris) => res.json())
.quindi((dati) => {
errore(dati.errore)
setdata(dati.scherzo)
caricamento delle impostazioni(falso)
})
}, [URL]);Restituzione {dati, caricamento, errore};
};
esportarepredefinito useFetch;
In questo hook, stai prima inizializzando lo stato di tre valori:
- dati: contiene la risposta dell'API.
- errore: contiene un messaggio di errore se si verifica un errore.
- caricamento: contiene un valore booleano che indica se ha recuperato i dati dell'API. Inizializza lo stato di caricamento su true. Una volta che l'API ha restituito i dati, impostalo su false.
L'hook useEffect() prende la stringa URL come argomento. Questo per garantire che venga eseguito ogni volta che l'URL cambia.
La funzione useFetch() restituirà un oggetto contenente i dati, il caricamento e i valori di errore.
Utilizzo di un hook personalizzato React
Per utilizzare l'hook personalizzato useFetch() appena creato, inizia importandolo:
cost useFetch = richiedere("./useFetch")
Quindi usalo come segue:
cost {dati, caricamento, errore} = useFetch (url)
Per dimostrare, considera il seguente componente Scherzi:
cost Scherzi = () => {
URL const = "<https://sv443.net/jokeapi/v2/joke/Programming? tipo=singolo>";
cost { dati, caricamento, errore } = useFetch (url);Se (Caricamento in corso) Restituzione (
<div>Caricamento in corso...</div>
)Restituzione (
<div>
{errore &&<div>{errore}</div>}
{dati &&<div>{<div>{dati}</div>}</div>}
</div>
);
};
esportarepredefinito Scherzi;
Chiama l'hook useFetch() con l'URL dell'API jokes e riceve i dati, il caricamento e i valori di errore.
Per eseguire il rendering del componente Scherzi, prima controlla se il caricamento è vero. In tal caso, visualizzare un'istruzione "Caricamento in corso...", altrimenti visualizzare i dati e il messaggio di errore se presente.
Perché usare ganci React personalizzati?
Proprio come hai usato l'hook personalizzato useFetch() in questo componente, puoi riutilizzarlo di nuovo in altri componenti. Questa è la bellezza di esternare la logica negli hook invece di scriverla in ogni componente.
Gli hook sono una potente funzionalità di React che puoi utilizzare per migliorare la modularità del tuo codice.