Firebase 和 React 的 useEffect 清理功能

我有一个问题，我的 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

此致， 奥斯卡

问题是组件已卸载，但您尝试在卸载后设置状态。防止这种情况的最简单方法是有一个isMounted变量设置为true在你的清理函数中，你设置为false。然后，仅在该变量是时才设置效果中的状态true.

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;
  };
}, []);