Meydan okuma: useFetch hook

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.

Örnek çözümü göster

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 };
}

Kendini test et

useFetch ne döndürmeli?
- Yalnızca veri
- Veri, hata ve loading
- Yalnızca loading
- Yalnızca hata
Cevabı göster

Veri, hata ve loading — { data, error, loading } hook'un üç durumudur.

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 };
}

Cevabı göster

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 };
}

Sıradaki ders: Meydan okuma: Tema sağlayıcı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler