React aplikacije koje razvijate često će dohvaćati podatke iz vanjskog API-ja, a React tim se pobrinuo da udovolji ovoj potrebi. The koristiti() kuka pojednostavljuje proces dohvaćanja podataka.

Koristeći ovu kuku, smanjit ćete količinu standardnog koda koji vam je potreban za definiranje obećanja i ažuriranje stanja aplikacije. Saznajte sve o Reactu koristiti() hook i kako ga koristiti u svojim React projektima.

Osnovna komponenta

Razmotrite sljedeću komponentu, na primjer:

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

Nakon što React renderira ovu komponentu, ona koristi API koristeći fetch(). Zatim ili sprema podatke u stanje komponente ako je zahtjev bio uspješan ili postavlja isError varijabla na true ako nije.

Ovisno o stanju, zatim prikazuje ili podatke iz API-ja ili poruku o pogrešci. Dok je API zahtjev na čekanju, na stranici se prikazuje tekst "Učitavanje...".

Implementacija useHook().

Gornja komponenta je malo glomazna jer je puna šablonskog koda. Da biste riješili ovaj problem, unesite koristiti() priključite i refaktorirajte svoj kod.

Uz use() hook, možete smanjiti gornju komponentu na samo dvije linije koda. Ali prije nego što to učinite, imajte na umu da je ova kuka prilično nova pa je možete koristiti samo u eksperimentalnoj verziji Reacta. Stoga provjerite koristite li tu verziju:

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

Sada ste spremni za korištenje kuke, počevši od zamjene useState i useEffect uvozi sa samo koristiti:

import {use} from"react"

Unutar Podaci komponentu, jedina stvar koju ćete zadržati je zahtjev za dohvaćanje. Ali morat ćete zamotati zahtjev za dohvaćanje unutar vašeg koristiti() kuka; vraća ili JSON podatke ili pogrešku. Zatim postavite odgovor na varijablu pozvanu podaci:

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

To je sve! Kao što vidite, gornji kod smanjuje komponentu na samo dvije linije koda. To pokazuje koliko use() kuka može biti korisna u ovakvim scenarijima.

Stanje učitavanja (napetost)

Važan dio koristiti() kuka obrađuje stanja učitavanja i pogreške. To možete učiniti unutar nadređene komponente Podaci.

Da biste implementirali funkciju učitavanja, omotajte Podaci komponenta sa Suspenzija. Ova komponenta ima zamjensku potporu koju će renderirati kad god ste u stanju učitavanja:

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

 </Suspense>
 </>
 )
}

The koristiti() kuka u podatkovnoj komponenti pokreće ovu neizvjesnost da se učita. Iako obećanje tek treba riješiti, aplikacija komponenta će prikazati rezervno stanje. Zatim, kada je Podaci komponenta prima podatke o odgovoru, prikazuje sadržaj umjesto stanja učitavanja.

Rukovanje pogreškama s granicom pogreške

Kada je riječ o hvatanju pogrešaka, morate znati kako radi Error Boundary koristiti ga. Obično ćete ga koristiti kada radite sa Suspenseom.

Primjer granice pogreške je u sljedećem kodu:

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;

Ovaj primjer granice pogreške ima objekt stanja koji prati stanje pogreške i što je pogreška. Zatim dobiva izvedeno stanje iz te pogreške. The render() funkcija prikazuje zamjenski element ako postoji pogreška. U suprotnom, prikazuje sve što je unutar .

Gornja komponenta radi gotovo isto kao Suspense. Dakle, u komponenti aplikacije možete omotati sve unutar ErrorBoundary komponenta ovako:

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