Meydan okuma: useFetch hook
- React kursu
- Orta seviye
- Ders 77/80
- 6 dk
Yükleniyor, hata ve veri durumlarını döndüren useFetch hook'unu yazarsın.
Meydan okuma: useFetch hook
Bu meydan okumada bir useFetch hook'u yazacaksın. Hook, bir URL alsın, veriyi çeksin ve { data, error, loading } döndürsün.
İpucu: useEffect içinde fetch çağır, useState ile loading ve data'yı tut. Hata durumunda error'ı set et.
Bu meydan okuma az ipucuyla gelir; öğrendiklerini birleştir.
Uygulama useFetch hook yaz
useFetch hook'u yaz: url parametresi alsın, useState ile data (null), loading (true) ve error (null) tut. useEffect içinde fetch(url) çağır, .then(r => r.json()) ile JSON'a çevir, .then(setData) ve .catch(setError), .finally(() => setLoading(false)) yapsın. { data, loading, error } döndür ve export et. useEffect'in bağımlılık dizisi [url] olsun.
Başlangıç kodu
import { useState, useEffect } from "react";
// useFetch hook'unu buraya yazÖrnek çözüm
import { useState, useEffect } from "react";
export function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then((r) => r.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useFetch ne döndürmeli?
- Yalnızca veri
- Veri, hata ve loading Doğru cevap
- Yalnızca loading
- Yalnızca hata
Açıklama: { data, error, loading } hook'un üç durumudur.
2 useFetch loading state
export function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(____);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url).then(r => r.json()).then(setData).finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}export function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url).then(r => r.json()).then(setData).finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}Açıklama: Loading başlangıçta true olur.