Aplicațiile React pe care le dezvoltați vor prelua adesea date dintr-un API extern, iar echipa React s-a asigurat că răspunde acestei nevoi. The utilizare() hook simplifică procesul de preluare a datelor.

Folosind acest cârlig, veți reduce cantitatea de cod standard de care aveți nevoie pentru a defini promisiunile și pentru a actualiza starea aplicației. Aflați totul despre React utilizare() cârlig și cum să îl utilizați în proiectele dvs. React.

Componenta de bază

Luați în considerare următoarea componentă, de exemplu:

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>
 )
}

Odată ce React redă această componentă, aceasta consumă API-ul folosind fetch(). Apoi fie salvează datele în starea componentei dacă cererea a avut succes, fie setează isError variabilă la adevărat dacă nu a fost.

În funcție de stare, apoi redă fie date din API, fie un mesaj de eroare. În timp ce solicitarea API este în așteptare, afișează textul „Se încarcă...” pe pagină.

Implementarea useHook().

Componenta de mai sus este puțin greoaie, deoarece este plină de cod boilerplate. Pentru a rezolva această problemă, aduceți utilizare() agățați și refactorizați codul dvs.

Cu ajutorul cârligului use(), puteți reduce componenta de mai sus la doar două linii de cod. Dar înainte de a face asta, rețineți că acest cârlig este destul de nou, așa că îl puteți utiliza numai în versiunea experimentală a React. Așa că asigură-te că folosești acea versiune:

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

Acum sunteți gata să utilizați cârligul, începând cu înlocuirea useState și useEffect importuri cu doar utilizare:

import {use} from"react"

În interiorul Date componentă, singurul lucru pe care îl veți păstra este cererea de preluare. Dar va trebui să includeți cererea de preluare în interiorul dvs utilizare() cârlig; returnează fie date JSON, fie o eroare. Apoi setați răspunsul la o variabilă numită date:

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

Asta e tot! După cum puteți vedea, codul de mai sus reduce componenta la doar două linii de cod. Asta demonstrează cât de util poate fi cârligul use() în scenarii ca acesta.

Stare de încărcare (Suspense)

O parte importantă a utilizare() hook gestionează stările de încărcare și eroare. Puteți face acest lucru în componenta părinte a Date.

Pentru a implementa funcționalitatea de încărcare, înfășurați Date componenta cu Suspans. Această componentă are un suport alternativ pe care îl va reda oricând vă aflați în starea de încărcare:

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

 </Suspense>
 </>
 )
}

The utilizare() cârligul din componenta de date declanșează încărcarea acestui suspans. În timp ce promisiunea este încă de rezolvat, App componenta va reda starea de rezervă. Apoi, când Date componenta primește datele de răspuns, redă conținutul în loc de starea de încărcare.

Tratarea erorilor cu limita de eroare

Când vine vorba de prinderea erorilor, trebuie să știți cum funcționează Error Boundary să-l folosească. De obicei, îl veți folosi atunci când lucrați cu Suspense.

Un exemplu de limită de eroare este în următorul cod:

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;

Acest exemplu de limită de eroare are un obiect de stare care urmărește starea erorii și care este eroarea. Apoi, primește starea derivată din acea eroare. The face() funcția afișează elementul de rezervă dacă există o eroare. În caz contrar, redă orice se află în interiorul .

Componenta de mai sus funcționează aproape la fel ca Suspansul. Deci, în componenta aplicație, puteți împacheta totul în interiorul ErrorBoundary componenta asa:

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>
}