Firebase listAll() 函数从存储中给了我相同的数组 2 次答案

【问题标题】：Firebase listAll() function gives me same array from storage 2 timesFirebase listAll() 函数从存储中给了我相同的数组 2 次
【发布时间】：2022-07-19 10:46:28
【问题描述】：

我正在尝试从 firebase/storage 显示我的图像，但是当我使用 listAll() 在我的应用程序上显示我的图像时，相同的图像在屏幕上出现了 2 次。我找不到是什么原因造成的。

下面的这段代码上传并显示图片。就是这样。

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

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


  const imagesListFolderRef = ref(storage, 'images');
  console.log("imagesListFolderRef---> " + imagesListFolderRef)

  const uploadImage = () => {
    if (imageUpload == null) return;

    const imageRef = ref(storage, `images/${imageUpload.name}`);
    uploadBytes(imageRef, imageUpload).then(() => {
      alert("image Uploaded");
    });
  };

  useEffect(() => {
    listAll(imagesListFolderRef).then((response) => {
      // console.log(response)
       
      response.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          return setImageList((prev) => [...prev, url]);
        });
      });
    });
  }, []);

  return (
    <div className="App">
      <input
        type="file"
        onChange={(e) => {
          setImageUpload(e.target.files[0]);
        }}
      />
      <button onClick={uploadImage}>Upload Image</button>
      {imageList.map((url) => {
        return <img src={url} />;
      })}
    </div>
  );
}

export default App;

DataBase/Storage Web Aplication

【问题讨论】：

标签： arrays reactjs database firebase function

【解决方案1】：

React Strick 模式两次提取数据，这就是它发生的原因。此外，您可以查看来自here 的有关此问题的链接。

【讨论】：