使用Firebase和React的useEffect清理函数

Question

使用Firebase和React的useEffect清理函数

reactjsfirebasegoogle-cloud-firestore

3

我遇到了一个问题，我的useEffect导致了以下警告：

无法对未挂载的组件执行React状态更新。这是一种无操作，但它表示您的应用程序中存在内存泄漏。要修复，请在useEffect清理函数中取消所有订阅和异步任务。

只有从此组件处于活动状态的页面重新加载时才会出现此问题。

这个组件工作得很好，但警告看起来很糟糕。

我看过多篇帖子，使用清理函数应该可以解决问题，并尝试应用，但仍然出现相同的警告。

有什么线索吗？

import React, { useState, useEffect } from 'react'
import ImageGallery from 'react-image-gallery';
import "./ImageGal.css"
import "react-image-gallery/styles/css/image-gallery.css";
import fire from "./firebase";

function ImageGal({ unique }) {

    const [images, setImages] = useState([]);    

    useEffect(() => {
        const fetchImages = async () => {
            const response = fire.firestore().collection("albums/" + unique + "/images"); //unique is the name of the album, passed on as a prop to this component
            const data = await response.get();
            const Imagearray = [];

            data.docs.forEach(item => {
                Imagearray.push({ id: item.id, original: item.data().url })
            })
            setImages(Imagearray)
        }

        fetchImages();

    }, [])


    return (
        <div className="imagegal">

            <ImageGallery
                infinite={true}
                lazyLoad={true} items={images} showThumbnails={false}
                slideInterval={4000}

            />
        </div>
    )
}

export default ImageGal

最好的问候，奥斯卡

- Oscar Ekstrand

请参考此链接：https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm#:~:text=Cleanup%20function%20in%20the%20useEffect,or%20prevent%20memory%20leaking%20issues。 - Gayatri Dipali

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick · Accepted Answer

问题在于组件卸载后，您尝试设置状态。最简单的方法是设置一个名为isMounted的变量，并在清理函数中将其设置为false。然后，仅当该变量为true时，在effect中设置状态。

useEffect(() => {
  let isMounted = true;

  const fetchImages = async () => {
    const response = fire
      .firestore()
      .collection("albums/" + unique + "/images"); //unique is the name of the album, passed on as a prop to this component
    const data = await response.get();
    const Imagearray = [];

    data.docs.forEach((item) => {
      Imagearray.push({ id: item.id, original: item.data().url });
    });

    if (isMounted) setImages(Imagearray);
  };

  fetchImages();

  return () => {
    isMounted = false;
  };
}, []);