Приложенията на React, които разработвате, често извличат данни от външен API и екипът на React се е погрижил да задоволи тази нужда. The използване () hook опростява процеса на извличане на данни.

Използвайки тази кука, вие ще намалите количеството шаблонен код, от който се нуждаете, за да дефинирате обещания и да актуализирате състоянието на приложението. Научете всичко за React's използване () кука и как да го използвате във вашите React проекти.

Основният компонент

Помислете например за следния компонент:

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

След като React изобрази този компонент, той използва API с помощта на fetch(). След това или записва данните в състоянието на компонента, ако заявката е била успешна, или задава isError променлива на true, ако не беше.

В зависимост от състоянието, той изобразява или данни от API, или съобщение за грешка. Докато заявката за API е изчакваща, тя показва текст „Зарежда се...“ на страницата.

Имплементацията на useHook().

Горният компонент е малко тромав, тъй като е пълен с шаблонен код. За да разрешите този проблем, въведете използване () закачете и преработете вашия код.

С куката use() можете да намалите горния компонент само до два реда код. Но преди да направите това, имайте предвид, че тази кука е доста нова, така че можете да я използвате само в експерименталната версия на React. Затова се уверете, че използвате тази версия:

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

Вече сте готови да използвате куката, като започнете с подмяната на useState и useEffect внася само с използване:

import {use} from"react"

Вътре в Данни компонент, единственото нещо, което ще запазите, е заявката за извличане. Но ще трябва да обвиете заявката за извличане във вашата използване () кука; връща или JSON данни, или грешка. След това задайте отговора на променлива, наречена данни:

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

Това е всичко! Както можете да видите, горният код намалява компонента само до два реда код. Това демонстрира колко полезна може да бъде куката use() в сценарии като този.

Състояние на зареждане (напрежение)

Важна част от използване () hook обработва състоянията на зареждане и грешка. Можете да направите това вътре в родителския компонент на Данни.

За да приложите функционалността за зареждане, обвийте Данни компонент с Съспенс. Този компонент приема резервна опора, която ще рендира всеки път, когато сте в състояние на зареждане:

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

 </Suspense>
 </>
 )
}

The използване () кука в компонента данни задейства това напрежение да се зареди. Докато обещанието все още не е разрешено, Приложение компонент ще изобрази резервното състояние. Тогава, когато на Данни компонент получава данните за отговор, той изобразява съдържанието вместо състоянието на зареждане.

Обработка на грешки с граница на грешка

Когато става въпрос за улавяне на грешки, трябва да знаете как работи Error Boundary да го използвате. Обикновено ще го използвате, когато работите със 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;

Този пример за граница на грешка има обект на състояние, който проследява състоянието на грешката и каква е грешката. След това получава полученото състояние от тази грешка. The render() функцията показва резервния елемент, ако има грешка. В противен случай той изобразява всичко, което е вътре в .

Горният компонент работи почти по същия начин като Suspense. Така че в компонента на приложението можете да обвиете всичко вътре в 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>
}