Varsayılan değer ve hata
- React kursu
- Orta seviye
- Ders 11/80
- 4 dk
Provider dışında kullanımı hata fırlatan bir hook yazmayı öğrenirsin.
Varsayılan değer ve hata
Context'e null varsayılan değer verip sonra kontrol etmeden kullanmak yaygın bir hatadır. const user = useContext(UserContext); user.name satırı, Provider yoksa patlar.
Çözüm: varsayılan değer olarak bir hata fırlatan bir nesne ver. createContext({ '{ getName: () => { throw new Error("UserContext Provider yok"); } }' }). Böylece Provider yoksa anlamlı bir hata alınır.
Daha temiz yöntem: özel bir useUserContext hook'u yaz. İçinde useContext(UserContext) çağır; null ise throw yap. Bu, tüketen bileşenlerin her seferinde kontrol yapmasını önler.
Özel useXContext hook'u
Her context için bir useXContext hook'u yazmak iyi bir alışkanlıktır. Hook içinde const ctx = useContext(XContext); if (ctx === null) throw new Error("XContext Provider içinde kullanın"); return ctx;.
Bu desen üç şey kazanır: tip güvenliği (TypeScript'te daha da güçlenir), tutarlı hata mesajı ve merkezi doğrulama. Tüketen bileşenler useUserContext() çağırır, null kontrolü yapmaz.
Eğer daha sonra context'e debug log eklemek istersen, yalnızca bu hook'u güncellersin. Tüm tüketenler otomatik olarak faydalanır. Bu yaklaşım büyük projelerde hayat kurtarır.
Uygulama useUserContext guard
Aşağıdaki iskeleti tamamla. useUserContext hook'u yaz. const ctx = useContext(UserContext); çağır. Eğer ctx === null ise throw new Error("UserContext Provider içinde kullanın");. ctx'i döndür. Hook'u dışa aktar.
Başlangıç kodu
import { useContext } from "react";
// useUserContext hook'unu buraya yazÖrnek çözüm
import { useContext } from "react";
function useUserContext() {
const ctx = useContext(UserContext);
if (ctx === null) throw new Error("UserContext Provider içinde kullanın");
return ctx;
}
export default useUserContext;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 null varsayılan context neye yol açar?
- Daha az kod
- Daha hızlı çalışır
- useEffect atlanır
- Provider yoksa patlar Doğru cevap
Açıklama: null varsayılan, Provider yoksa patlar.
2 Guard hook
Guard hook, ____ değerini görünce hata fırlatır.Guard hook, null değerini görünce hata fırlatır.Açıklama: null görünce hata fırlatılır.
3 Guard desenini eşleştir
| Kavram | Anlamı |
|---|---|
useContext |
Okuma |
null |
Hata koşulu |
throw |
Hata fırlatma |
useXContext |
Hook |