Kui olete Reactiga mõnda aega töötanud, võisite näha teadet „Kaaluge veapiiri lisamist oma puu veakäsitluse käitumise kohandamiseks. Võib-olla olete seda oma brauseri konsoolis alati näinud, kui teie komponente kasutasite krahh.
React soovitab kasutada veapiiri, et pakkuda vea ilmnemisel paremat kasutuskogemust.
Mis on Reacti veapiiriklass?
Veapiirid töötavad nagu proovi/püüdke plokki vanilje JavaScriptis. Erinevus seisneb selles, et nad püüavad kinni Reacti komponentides esinevad vead. Kui kasutajaliidese komponendis ilmneb tõrge, ühendab React selle komponendi puu lahti ja asendab selle teie määratletud varu kasutajaliidesega. See tähendab, et viga mõjutab ainult komponenti, milles see ilmneb, ja ülejäänud rakendus töötab ootuspäraselt.
Vastavalt Reageeri dokumentatsioon, veapiiri klassid ei taba vigu järgmistes kohtades:
- Sündmuste korraldajad.
- Asünkroonne kood.
- Serveripoolne kood.
- Vead, mis on visatud veapiiri endasse (mitte selle lastesse).
Ülaltoodud tõrgete korral saate kasutada try/catch plokki.
Näiteks tõrke leidmiseks, mis ilmneb rakenduses sündmuste käitleja, kasutage järgmist koodi:
funktsiooniSündmuse komponent() {
konst [error, setError] = useState(null)konst käepideClick = () => {
proovi {
// Tee midagi
} püüda (viga) {
setError (viga)
}
}
tagasi (
<>
<div>{viga? viga: ""}div>
<nuppuonClick={handleClick}>Nuppnuppu>
)
}
Kasutage veapiire ainult Reacti komponentide vigade leidmiseks.
Veapiiriklassi loomine
Veapiiri saate luua, määratledes klassi, mis sisaldab ühte või mõlemat järgmistest meetoditest.
- staatiline getDerivedStateFromError()
- komponentDidCatch()
Funktsioon getDerivedStateFromError() värskendab komponendi olekut pärast tõrke leidmist, samal ajal kui saate kasutada komponentiDidCatch() veateabe logimiseks konsooli. Samuti saate vead saata veateateteenusele.
Allpool on näide lihtsa veapiiri klassi loomisest.
klassErrorBoundaryulatubReageerige.Komponent{
konstruktor(rekvisiidid) {
Super(rekvisiidid);
see.state = { viga: vale };
}staatilinegetDerivedStateFromError(viga){
// Värskendage olekut, et järgmine renderdus näitaks varu kasutajaliidest.
tagasi { viga: viga };
}komponentDidCatch (viga, errorInfo) {
// Logige tõrge veateateteenusesse
}render() {
kui (see.riik.error) {
// Looge siin kohandatud varu kasutajaliides
tagasi<h1>Tundub, et on probleem.h1>;
}
tagasisee.rekvisiidid.lapsed;
}
}
eksportidavaikimisi ErrorBoundary;
Vea ilmnemisel värskendab getDerivedStateFromError() olekut ja käivitab järelikult uuesti renderduse, mis kuvab varu kasutajaliidese.
Kui te ei soovi veapiiri klassi nullist luua, kasutage React-error-boundary NPM pakett. See pakett sisaldab komponenti ErrorBoundary, mis ümbritseb komponente, mis teie arvates võivad põhjustada vigu.
Veapiiriklassi kasutamine
Vigade käsitlemiseks mähkige komponendid veapiiri klassi komponendiga. Saate mähkida tipptaseme komponendi või üksikud komponendid.
Kui mähite ülataseme komponendi, käsitleb veapiiriklass kõigi Reacti rakenduse komponentide tekitatud vigu.
<ErrorBoundary>
<Rakendus/>
ErrorBoundary>
Kui mähite üksiku komponendi veapiiriga, ei mõjuta selle komponendi viga teise komponendi renderdamist.
<ErrorBoundary>
<Profiil/>
ErrorBoundary>
Näiteks profiili komponendi viga ei mõjuta seda, kuidas mõni muu komponent, nagu komponent Hero, renderdab. Kuigi profiilikomponent võib kokku kukkuda, töötab ülejäänud rakendus hästi. See on palju parem kui Reacti pakutava üldise valge varuekraani renderdamine.
JavaScripti vigade käsitlemine
Programmeerimisvead võivad arendajatele ja kasutajatele pettumust valmistada. Vigade käsitlemata jätmine võib teie kasutajad paljastada inetu kasutajaliidese ja raskesti mõistetavate veateadetega.
Reacti komponendi loomisel looge veapiiriklass kas nullist või kasutage kasutajasõbralike veateadete kuvamiseks paketti react-error-boundary.
