Bir React uygulamasında çözmeniz gereken en yaygın sorunlardan biri, harici verilerin alınmasıdır. Genel olarak, bu, nasıl çözüleceğini öğrendiğiniz ilk sorunlardan biridir, ancak uygulamaların çoğu basit bir hata yapar, monte edilmemiş bir bileşenin durumunu günceller .

Çok basit bir örnekle başlayacağız, gönderilerle ilgili verileri getiren, getirme devam ederken yükleme mesajı gösteren, hata durumunda hata gösteren ve başka bir durumda listeyi görüntüleyen bir Blog bileşeni. yazının.

const Blog = () => {
  const [posts, setPosts] = useState([]);
  const [status, setStatus] = useState('idle');
  const [error, setStatus] = useState(null);
useEffect(() => {
    const fetchData = async () => {
      setStatus('loading');
      try{
        setStatus('loading');
        const posts = await getAllPosts();
        setPosts(posts);
        setStatus('finished');
       } catch(e) {
         setStatus('error');
         setError(e);
       }
    }
  }, []);
if(status == 'error') return <p>Error while loading data</p>;
  if(status == 'loading') return <p>Loading...<p>;
  return <PostGrid posts={posts} />
};

İşlev getAllPosts, beklenen bir zaman uyumsuz işlevdir, bu işlevin geri dönmesi birkaç saniye sürebilir ve döndüğünde kod işlevi çağırmaya çalışır setPosts, ancak bu andan önce bileşen bağlantısı kaldırıldığında ne oldu?. Monte edilmemiş bir bileşenin durumunu ayarlayamadığınız için bir uyarı alırsınız.

const posts = await getAllPosts();
setPosts(posts);  # Warning: Can't perform a React state update on an unmounted component.
setStatus('finished');

getAllPostsAnahtar, durumu yalnızca bileşen monte edilmişse ayarlamaktır, bu durumda, bileşenin çağrıldıktan sonra monte edildiğinden emin olmanız gerekir . Bunun için, mevcut bileşenin takılı olup olmadığını kontrol etmek için mekanizmayı soyutlayan bir kanca kullanacağız.

const useIsMounted = () => {
  const isMounted = React.useRef(false);     // (1)
  React.useEffect(() => {
    isMounted.current = true;                // (2)
    return () => isMounted.current = false;  // (3)
  }, []);                                    // (3)
  return isMounted.current;
}

Artık orijinal bileşeninizle birlikte kullanabilirsiniz.

const Blog = () => {
  const [posts, setPosts] = useState([]);
  const [status, setStatus] = useState('idle');
  const [error, setStatus] = useState(null);
  const isMounted = useIsMounted();
useEffect(() => {
    const fetchData = async () => {
      setStatus('loading');
      try{
        const posts = await getAllPosts();
        if(isMounted) {
          setPosts(posts);                    // 1
          setStatus('finished');
        }
} catch(e) {
          if(isMounted) {
            setStatus('error');               // 2
            setError(e);
          }
       }
    }
  }, []);
if(status == 'error') return <p>Error while loading data</p>;
  if(status == 'finished') return <PostList posts={posts} />
  return <p>Loading...<p>;
};

Sonuçlar

Monte edilmemiş bir bileşenin durumunu güncellemeye çalışmak, tepki veren uygulamalarda çok yaygın bir sorundur, bu sorun genellikle bazı harici verileri getirdiğinizde sunulur, ancak aynı sorun, durum üzerinde bazı değişiklikleri tetikleyen herhangi bir zaman uyumsuz olayı kullandığınızda da sunulur. onun tamamlanması.

Okuduğunuz için teşekkürler!

Bu gönderi bu kadar, umarım içerik beğeninize olmuştur, bir sonraki gönderide görüşmek üzere.

PlainEnglish.io'da daha fazla içerik . Ücretsiz haftalık bültenimize kaydolun . Bizi Twitter ve LinkedIn'de takip edin . Topluluğumuza katılın Discord .