Οι εφαρμογές React που αναπτύσσετε θα ανακτούν συχνά δεδομένα από ένα εξωτερικό API και η ομάδα του React έχει φροντίσει να καλύψει αυτήν την ανάγκη. ο χρήση() Το άγκιστρο απλοποιεί τη διαδικασία ανάκτησης δεδομένων.

Χρησιμοποιώντας αυτό το άγκιστρο, θα μειώσετε την ποσότητα του κωδικού λέβητα που χρειάζεστε για να ορίσετε τις υποσχέσεις και να ενημερώσετε την κατάσταση της εφαρμογής. Μάθετε τα πάντα για το React χρήση() hook και πώς να το χρησιμοποιήσετε στα έργα σας στο 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))
 })





instagram viewer
return isLoading? (
Loading...</h1>
 ): isError? (

Error</h1>
 ): (
{JSON.stringify(data, null, 2)}</pre>
 )
}

Μόλις το React αποδώσει αυτό το στοιχείο, αυτό καταναλώνει το API χρησιμοποιώντας fetch(). Στη συνέχεια είτε αποθηκεύει τα δεδομένα στην κατάσταση του στοιχείου εάν το αίτημα ήταν επιτυχές, είτε ορίζει το είναι Σφάλμα μεταβλητή σε αληθές αν δεν ήταν.

Ανάλογα με την κατάσταση, στη συνέχεια αποδίδει είτε δεδομένα από το API είτε ένα μήνυμα σφάλματος. Ενώ το αίτημα API είναι σε εκκρεμότητα, εμφανίζεται ένα κείμενο "Φόρτωση..." στη σελίδα.

Η εφαρμογή useHook().

Το παραπάνω εξάρτημα είναι λίγο δυσκίνητο, καθώς είναι γεμάτο κώδικα λέβητα. Για να λύσετε αυτό το πρόβλημα, εισάγετε το χρήση() συνδέστε και αναδιαμορφώστε τον κωδικό σας.

Με το άγκιστρο use(), μπορείτε να μειώσετε το παραπάνω στοιχείο σε δύο μόνο γραμμές κώδικα. Αλλά πριν το κάνετε αυτό, σημειώστε ότι αυτό το άγκιστρο είναι μάλλον νέο, επομένως μπορείτε να το χρησιμοποιήσετε μόνο στην πειραματική έκδοση του React. Βεβαιωθείτε λοιπόν ότι χρησιμοποιείτε αυτήν την έκδοση:

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

Τώρα είστε έτοιμοι να χρησιμοποιήσετε το άγκιστρο, ξεκινώντας αντικαθιστώντας το χρήση Κατάσταση και 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() σε σενάρια όπως αυτό.

Κατάσταση φόρτωσης (Αναστολή)

Ένα σημαντικό μέρος του χρήση() Το άγκιστρο χειρίζεται τις καταστάσεις φόρτωσης και σφάλματος. Μπορείτε να το κάνετε αυτό μέσα στο γονικό στοιχείο του Δεδομένα.

Για να εφαρμόσετε τη λειτουργία φόρτωσης, τυλίξτε το Δεδομένα συστατικό με Αγωνία. Αυτό το στοιχείο παίρνει ένα εφεδρικό στηρίγματα που θα αποδώσει κάθε φορά που βρίσκεστε σε κατάσταση φόρτωσης:

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

 </Suspense>
 </>
 )
}

ο χρήση() Το άγκιστρο στο στοιχείο Δεδομένα ενεργοποιεί αυτό το σασπένς για φόρτωση. Ενώ η υπόσχεση δεν έχει ακόμη επιλυθεί, η App συστατικό θα αποδώσει την εναλλακτική κατάσταση. Στη συνέχεια, όταν το Δεδομένα Το στοιχείο λαμβάνει τα δεδομένα απόκρισης, αποδίδει το περιεχόμενο αντί για την κατάσταση φόρτωσης.

Διαχείριση σφαλμάτων με όριο σφάλματος

Όταν πρόκειται για τη σύλληψη σφαλμάτων, πρέπει να γνωρίζετε πώς λειτουργεί το όριο σφάλματος να το χρησιμοποιήσετε. Συνήθως, θα το χρησιμοποιείτε όταν εργάζεστε με το 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;

Αυτό το παράδειγμα ορίου σφάλματος έχει ένα αντικείμενο κατάστασης που παρακολουθεί την κατάσταση σφάλματος και ποιο είναι το σφάλμα. Στη συνέχεια, λαμβάνει την προκύπτουσα κατάσταση από αυτό το σφάλμα. ο καθιστώ() Η λειτουργία εμφανίζει το εναλλακτικό στοιχείο εάν υπάρχει σφάλμα. Διαφορετικά, αποδίδει ό, τι υπάρχει μέσα στο .

Το παραπάνω στοιχείο λειτουργεί σχεδόν το ίδιο με το Suspense. Έτσι, στο στοιχείο App, μπορείτε να τυλίξετε τα πάντα μέσα στο Όριο σφάλματος συστατικό όπως αυτό:

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