Özet - Error boundary

Bir widget'ı saran, hata verince yedek gösteren sınır yazarsın.

Özet - Error boundary

Bu grupta error boundary'nin ne olduğunu, sınıf bileşeni yapısını ve yedek arayüz tasarımını öğrendin. Hata sınırı, soy ağacındaki hataları yakalayıp yedek arayüze geçer.

Üç temel parça: getDerivedStateFromError state günceller, componentDidCatch kaydeder, render yedek veya children çizer. Son adımda tüm parçaları birleştireceksin.

Uygulama Tam error boundary

Aşağıdaki iskeleti tamamla. ErrorBoundary sınıfı yaz; getDerivedStateFromError, componentDidCatch metotları ve hasError true ise <h1>Hata</h1> döndüren render metodu olsun. Dışa aktar.

Örnek çözümü göster

import { Component } from "react";

class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.log(error, info);
  }
  render() {
    if (this.state.hasError) return <h1>Hata</h1>;
    return this.props.children;
  }
}

export default ErrorBoundary;

Kendini test et

componentDidCatch ne yapar?
- Çizimi iptal eder
- Yan etki yapar
- Render eder
- State günceller
Cevabı göster

Yan etki yapar — componentDidCatch yan etki yapar; örneğin hatayı kaydeder.
Özet eşleştir

getDerivedStateFromError

State günceller
componentDidCatch

Kaydeder
hasError

Hata durumu
yedek arayüz

Nazik mesaj

Sıradaki ders: React.lazy nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler