javascript / beginner
Snippet
Fehlerbehandlung in React mittels Error-Boundary-Klassen
Error Boundaries sind React-Komponenten, die JavaScript-Laufzeitfehler in ihrem Kindkomponenten-Baum abfangen, protokollieren und eine Fallback-Benutzeroberfläche anzeigen, anstatt die gesamte Anwendung abstürzen zu lassen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class SafeZone extends React.Component {state = { hasError: false };static getDerivedStateFromError(error) {return { hasError: true };}render() {if (this.state.hasError) {return <h2>Something went wrong. Please try again.</h2>;}return this.props.children;}}
react
Erklärung
1
state = { hasError: false };
Initialisiert den Zustand mit einem booleschen Wert, der anzeigt, ob ein Fehler aufgetreten ist.
2
static getDerivedStateFromError(error) {
Lebenszyklus-Methode, die den Zustand aktualisiert, um nach einem Fehler die Fallback-UI anzuzeigen.
3
if (this.state.hasError) {
Prüft den Fehlerzustand beim Rendern, um die Fehlermeldung anzuzeigen.
4
return this.props.children;
Rendert die regulären Kindelemente, wenn kein Fehler aufgetreten ist.