Özet - Error boundary
- React kursu
- Orta seviye
- Ders 56/80
- 5 dk
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.
Başlangıç kodu
import { Component } from "react";
// ErrorBoundary sınıfını buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 componentDidCatch ne yapar?
- Çizimi iptal eder
- Yan etki yapar Doğru cevap
- Render eder
- State günceller
Açıklama: componentDidCatch yan etki yapar; örneğin hatayı kaydeder.
2 Özet eşleştir
| Kavram | Anlamı |
|---|---|
getDerivedStateFromError |
State günceller |
componentDidCatch |
Kaydeder |
hasError |
Hata durumu |
yedek arayüz |
Nazik mesaj |