Le app React che sviluppi spesso recuperano dati da un'API esterna e il team React si è assicurato di soddisfare questa esigenza. IL utilizzo() hook semplifica il processo di recupero dei dati.

Utilizzando questo hook, ridurrai la quantità di codice boilerplate necessario per definire le promesse e aggiornare lo stato dell'applicazione. Scopri tutto su React utilizzo() hook e come usarlo nei tuoi progetti React.

Il componente di base

Consideriamo ad esempio il seguente componente:

import {useEffect, useState} from"react"
exportfunctionData({ url }) {
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
const [data, setData] = useState()
 useEffect(() => {
 setIsError(false)
 setIsLoading(true)
 setData(undefined)
 fetch(url)
 .then(res => res.json())
 .then(setData)
 .catch(() => setIsError(true))
 .finally(() => setIsLoading(false))
 })
return isLoading? (
Loading...</h1>
 ): isError? (

Error</h1>
 ): (
{JSON.stringify(data, null, 2)}</pre>
 )
}

Una volta che React esegue il rendering di questo componente, esso consuma l'API utilizzando fetch(). Quindi salva i dati nello stato del componente se la richiesta ha avuto successo oppure imposta il file isError variabile su true se non lo era.

A seconda dello stato, esegue il rendering dei dati dall'API o di un messaggio di errore. Mentre la richiesta API è in sospeso, viene visualizzato il testo "Caricamento in corso..." sulla pagina.

L'implementazione useHook()

Il componente di cui sopra è un po' macchinoso poiché è pieno di codice standard. Per risolvere questo problema, inserisci il file utilizzo() aggancia e rifattorizza il tuo codice.

Con l'hook use(), puoi ridurre il componente precedente a sole due righe di codice. Ma prima di farlo, tieni presente che questo hook è piuttosto nuovo, quindi puoi usarlo solo nella versione sperimentale di React. Quindi assicurati di utilizzare quella versione:

// package.json
"dependencies": {
"react": "experimental",
"react-dom": "experimental"
}
...

Ora sei pronto per utilizzare il gancio, iniziando sostituendo il useState E useEffect importazioni con solo utilizzo:

import {use} from"react"

Dentro il Dati componente, l'unica cosa che manterrai è la richiesta di recupero. Ma dovrai racchiudere la richiesta di recupero nel tuo file utilizzo() gancio; restituisce dati JSON o un errore. Quindi imposta la risposta a una variabile chiamata dati:

exportfunctionData({ url }) {
const data = use(fetch(url).then(res => res.json()))
return<pre>{JSON.stringify(data, null, 2)}pre>
}

È tutto! Come puoi vedere, il codice sopra riduce il componente a sole due righe di codice. Ciò dimostra quanto utile possa essere l'hook use() in scenari come questo.

Stato di caricamento (sospeso)

Una parte importante del utilizzo() l'hook gestisce gli stati di caricamento e di errore. Puoi farlo all'interno del componente genitore di Dati.

Per implementare la funzionalità di caricamento, avvolgi il file Dati componente con Suspense. Questo componente accetta un oggetto di fallback che eseguirà il rendering ogni volta che ti trovi nello stato di caricamento:

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Loading...</div>}>

 </Suspense>
 </>
 )
}

IL utilizzo() l'hook nel componente Dati attiva il caricamento di questa suspense. Mentre la promessa deve ancora essere risolta, il App Il componente renderà lo stato di fallback. Poi, quando il Dati Il componente riceve i dati di risposta, esegue il rendering del contenuto anziché dello stato di caricamento.

Gestione degli errori con limite di errore

Quando si tratta di individuare gli errori, è necessario saperlo come funziona il limite di errore per usarlo. In genere, lo utilizzerai quando lavori con Suspense.

Un esempio di limite di errore è nel codice seguente:

import React from"react"
classErrorBoundaryextendsReact.Component{
 state = { hasError: false, error: null }
static getDerivedStateFromError(error) {
return {
 hasError: true,
 error
 }
 }
 render() {
if (this.state.hasError) {
returnthis.props.fallback
 }
returnthis.props.children
 }
}
exportdefault ErrorBoundary;

Questo esempio di limite di errore ha un oggetto stato che tiene traccia dello stato dell'errore e della sua natura. Successivamente, ottiene lo stato derivato da quell'errore. IL rendere() la funzione visualizza l'elemento fallback se si verifica un errore. Altrimenti, rende tutto ciò che è all'interno di .

Il componente sopra funziona più o meno come Suspense. Quindi, nel componente App, puoi racchiudere tutto all'interno del file Limite di errore componente in questo modo:

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Oops! There's an error.

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(fetch(url).then(res => res.json()))
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(Context)
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}