javascript / beginner
Snippet
Abfangen von Render-Fehlern mit Class-Error-Boundaries
React Error Boundaries sind Klassenkomponenten, die getDerivedStateFromError oder componentDidCatch implementieren. Sie fangen JavaScript-Fehler im untergeordneten Komponentenbaum ab, verhindern den Absturz der gesamten UI und zeigen stattdessen eine Fallback-Nachricht an.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react';class ErrorBoundary extends Component {state = { hasError: false };static getDerivedStateFromError() {return { hasError: true };}render() {if (this.state.hasError) {return <h1>Something went wrong.</h1>;}return this.props.children;}}export default ErrorBoundary;
react
Erklärung
1
class ErrorBoundary extends Component {
Definiert eine objektorientierte Klassenkomponente, die von React.Component erbt.
2
static getDerivedStateFromError() {
Lifecycle-Methode, die nach einem Fehler im Kind aufgerufen wird und den neuen State für das Fallback-Rendering zurückgibt.
3
return { hasError: true };
Aktualisiert den Komponenten-State, um anzuzeigen, dass ein Fehler aufgetreten ist.
4
return this.props.children;
Rendert die verschachtelten Kindkomponenten regulär, solange kein Fehler vorliegt.