React-apparna du utvecklar hämtar ofta data från ett externt API, och React-teamet har sett till att tillgodose detta behov. De använda sig av() hook förenklar processen för datahämtning.

Genom att använda den här kroken minskar du mängden standardkod du behöver för att definiera löften och uppdatera applikationsstatus. Lär dig allt om React's använda sig av() krok och hur du använder den i dina React-projekt.

Grundkomponenten

Tänk på följande komponent, till exempel:

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

När React renderar den här komponenten, är den använder API: t med fetch(). Det sparar sedan antingen data till komponentens tillstånd om begäran lyckades, eller ställer in ärFel variabel till sant om det inte var det.

Beroende på tillståndet återger den sedan antingen data från API: t eller ett felmeddelande. Medan API-begäran väntar visas texten "Laddar..." på sidan.

UseHook()-implementationen

Ovanstående komponent är lite besvärlig eftersom den är full av boilerplate-kod. För att lösa detta problem, ta in använda sig av() kroka och refaktorera din kod.

Med use()-kroken kan du reducera ovanstående komponent till bara två rader kod. Men innan du gör det, observera att den här kroken är ganska ny så du kan bara använda den i den experimentella versionen av React. Så se till att du använder den versionen:

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

Du är nu redo att använda kroken, börja med att byta ut useState och useEffect importer med bara använda sig av:

import {use} from"react"

Inuti Data komponent, det enda du kommer att behålla är hämtningsförfrågan. Men du måste lägga in hämtningsförfrågan i din använda sig av() krok; det returnerar antingen JSON-data eller ett fel. Ställ sedan in svaret på en variabel som kallas data:

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

Det är allt! Som du kan se reducerar ovanstående kod komponenten till bara två rader kod. Det visar hur användbar use()-kroken kan vara i scenarier som detta.

Laddar tillstånd (suspense)

En viktig del av använda sig av() hook hanterar laddnings- och feltillstånden. Du kan göra detta i den överordnade komponenten Data.

För att implementera laddningsfunktionen, linda in Data komponent med Spänning. Den här komponenten tar en reservprop som den kommer att återge när du är i laddningstillståndet:

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

 </Suspense>
 </>
 )
}

De använda sig av() krok i Data-komponenten utlöser denna spänning att ladda. Medan löftet ännu inte har lösts, App komponenten återger reservtillståndet. Sedan, när Data komponenten tar emot svarsdata, återger den innehållet istället för laddningstillståndet.

Felhantering med felgräns

När det gäller att fånga fel måste du veta hur Error Boundary fungerar att använda den. Vanligtvis kommer du att använda det när du arbetar med Suspense.

Ett exempel på en felgräns finns i följande kod:

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;

Det här Error Boundary-exemplet har ett tillståndsobjekt som spårar feltillståndet och vad felet är. Därefter får den det härledda tillståndet från det felet. De framställa() funktionen visar reservelementet om det finns ett fel. Annars återger den allt som finns inuti .

Ovanstående komponent fungerar ungefär på samma sätt som suspense. Så, i app-komponenten kan du slå in allt inuti Error Boundary komponent så här:

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