Reactjs 使用Firebase和React的效果清理功能

我有一个问题，我的useEffect导致以下警告：

无法对未安装的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消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

import React，{useState，useffect}来自“React”
从“react image gallery”导入ImageGallery；
导入“/ImageGal.css”
导入“react image gallery/styles/css/image gallery.css”；
从“/firebase”导入火；
函数ImageGal（{unique}）{
const[images，setImages]=useState（[]）；
useffect（（）=>{
const fetchImages=async（）=>{
const response=fire.firestore（）.collection（“albums/”+unique+“/images”）；//unique是作为道具传递到此组件的相册的名称
const data=wait response.get（）；
常量Imagearray=[]；
data.docs.forEach（项目=>{
push（{id:item.id，original:item.data（）.url}）
})
设置图像（图像阵列）
}
获取图像（）；
}, [])
返回(
)
}
导出默认ImageGal

致以最良好的祝愿，

---

Oscar

问题在于组件卸载，但您尝试在卸载后设置状态。防止这种情况的最简单方法是将

isMounted

变量设置为

true

，在清除函数中，将其设置为

false

。然后，仅当该变量为

true

时才设置生效状态

useffect（（）=>{
让isMounted=真；
const fetchImages=async（）=>{
常数响应=火
.firestore（）
.collection（“albums/”+unique+“/images”）；//unique是作为道具传递到此组件的相册的名称
const data=wait response.get（）；
常量Imagearray=[]；
data.docs.forEach（（项目）=>{
push（{id:item.id，original:item.data（）.url}）；
});
如果安装了setImages（图像阵列）；
};
获取图像（）；
return（）=>{
isMounted=错误；
};
}, []);

请参阅此链接：。非常感谢，尼克！它现在可以工作，并且不提供任何警告！我和这件事纠缠了很久！很高兴我能帮忙！