Реацт апликације које развијате често преузимају податке из спољног АПИ-ја, а Реацт тим се побринуо да одговори на ову потребу. Тхе усе() кука поједностављује процес преузимања података.

Користећи ову куку, смањићете количину шаблонског кода који вам је потребан да бисте дефинисали обећања и ажурирали стање апликације. Сазнајте све о Реацт-у усе() кука и како да је користите у својим Реацт пројектима.

Основна компонента

Размотрите следећу компоненту, на пример:

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

Једном када Реацт рендерује ову компоненту, он користи АПИ користећи фетцх(). Затим или чува податке у стање компоненте ако је захтев био успешан или поставља исЕррор променљива у труе ако није.

У зависности од стања, онда приказује или податке из АПИ-ја или поруку о грешци. Док је АПИ захтев на чекању, на страници се приказује текст „Учитава се...“.

Имплементација усеХоок().

Горња компонента је мало гломазна јер је пуна шаблонског кода. Да бисте решили овај проблем, унесите усе() закачите и преправите свој код.

Са усе() куком, можете свести горњу компоненту на само две линије кода. Али пре него што то урадите, имајте на уму да је ова кука прилично нова, тако да можете да је користите само у експерименталној верзији Реацт-а. Зато се уверите да користите ту верзију:

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

Сада сте спремни да користите куку, почевши од замене усеСтате и усеЕффецт увози са само користити:

import {use} from"react"

Унутар Подаци компоненту, једина ствар коју ћете задржати је захтев за преузимање. Али мораћете да умотате захтев за преузимање у свој усе() кука; враћа или ЈСОН податке или грешку. Затим подесите одговор на променљиву која се зове података:

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

То је све! Као што видите, горњи код смањује компоненту на само две линије кода. То показује колико корисна кука усе() може бити у оваквим сценаријима.

Стање учитавања (у прекиду)

Важан део усе() кука управља стањем учитавања и грешке. То можете учинити унутар родитељске компоненте Подаци.

Да бисте применили функцију учитавања, умотајте Подаци компонента са Неизвесност. Ова компонента узима резервни пропс који ће рендеровати сваки пут када сте у стању учитавања:

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

 </Suspense>
 </>
 )
}

Тхе усе() кука у компоненти података покреће ову неизвесност за учитавање. Док обећање тек треба да буде решено, Апликација компонента ће приказати резервно стање. Затим, када је Подаци компонента прима податке о одговору, она приказује садржај уместо стања учитавања.

Руковање грешком са границом грешке

Када је у питању хватање грешака, морате знати како функционише граница грешке да га користим. Обично ћете га користити када радите са Суспенсе.

Пример границе грешке је у следећем коду:

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;

Овај пример границе грешке има објекат стања који прати стање грешке и шта је грешка. Затим добија изведено стање из те грешке. Тхе дати, пружити() функција приказује резервни елемент ако постоји грешка. У супротном, он приказује све што је унутар .

Горња компонента ради скоро исто као Суспенсе. Дакле, у компоненти апликације, можете умотати све унутар ЕррорБоундари компонента овако:

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