Firebase Storage listAll()返回重复数组 图片重复展示问题

图片重复加载是两个逻辑问题叠加导致的：

• React 18+ 开发环境默认开启严格模式，空依赖的useEffect会在组件挂载阶段执行2次，用于检测副作用是否缺少清理逻辑
• 现有拉取逻辑没有在每次拉取前重置图片列表状态，每次拿到URL都直接往原列表尾部追加，两次effect执行完同一张图的URL就会被追加两次

另外代码里还有个不规范的点：imagesListFolderRef直接定义在组件函数体内，每次组件重渲染都会重新生成Storage引用，存在无意义的性能开销。

核心调整点：

• 把Storage引用移到组件外部，避免重复生成
• 抽离图片拉取逻辑，用Promise.all并行获取所有文件的下载URL，一次性更新状态，从根源避免重复追加问题
• 上传完成后主动触发一次列表刷新，不用手动刷新页面就能看到新上传的图片
• 给渲染的img标签补充key属性，消除React渲染警告

修复后的完整代码：

import { useState, useEffect } from "react";
import "./App.css";
import { storage } from "./firebase";
import { ref, uploadBytes, listAll, getDownloadURL } from "firebase/storage";

// Storage引用移到组件外，仅初始化一次
const imagesListFolderRef = ref(storage, 'images');

function App() {
  const [imageUpload, setImageUpload] = useState(null);
  const [imageList, setImageList] = useState([]);

  const uploadImage = () => {
    if (imageUpload == null) return;
    const imageRef = ref(storage, `images/${imageUpload.name}`);
    uploadBytes(imageRef, imageUpload).then(() => {
      alert("图片上传成功");
      // 上传完成后刷新列表
      fetchImages();
    });
  };

  const fetchImages = async () => {
    const listRes = await listAll(imagesListFolderRef);
    // 并行拉取所有图片的访问地址
    const urls = await Promise.all(
      listRes.items.map(fileItem => getDownloadURL(fileItem))
    );
    // 全量替换图片列表，不会出现重复
    setImageList(urls);
  };

  useEffect(() => {
    fetchImages();
  }, []);

  return (
    <div className="App">
      <input
        type="file"
        onChange={(e) => setImageUpload(e.target.files[0])}
      />
      <button onClick={uploadImage}>上传图片</button>
      {imageList.map((url, index) => (
        <img key={index} src={url} alt="存储的图片" />
      ))}
    </div>
  );
}

export default App;

注意：不要为了规避useEffect双次执行就关闭React严格模式。严格模式的双调用机制是帮你提前排查不幂等的副作用逻辑，只要保证副作用执行多次和执行一次的结果一致，就不会出现这类异常。

内容的提问来源于stack exchange，提问作者Utku AKTAS