React firebase 画像が２度読み込まれる
解決したいこと
Reactをフロント、firebaseをバックエンドにしたWebアプリを制作しております。
製作中storageからの画像ファイルをダウンロードして表示したいのですが、２回読み込まれてしまい同じ画像が２回ずつ表示されてしまい
解決方法がわからないです。
エラーコードは出てない状態で、googleのコンソールにもエラーが出ていません。
※個人情報の箇所は隠してます
該当コード
firebase.js
import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey:
authDomain:
projectId:
storageBucket:
messagingSenderId:
appId:
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const storage = getStorage(app);
image.js
import React, { useEffect, useState } from "react";
import { storage } from './firebase';
import { ref, listAll, getDownloadURL } from 'firebase/storage';
export default function Image() {
const [imageList, setImageList] = useState([]);
const imageListRef = ref(storage, "images/");
useEffect(() => {
listAll(imageListRef).then((res) => {
res.items.forEach((item) => {
getDownloadURL(item).then((url) => {
setImageList((prev) => [...prev, url]);
});
});
});
}, []);
return(
<div className="works-container">
<div className="works-caption"><h2>Works</h2></div>
<div className="works-contents">
{imageList.map((url) => {
return <img src={url} alt="uploaded images" />
})}
</div>
</div>
);
}
自分で試したこと
useEffectに第２関数を指定した => ループが起こってしまった
mapメソッドをforEachにした => 2度表示が直らなかった
初めてreactのアプリを作成しておりまだまだフックなどについて理解度が追い付いておりませんがご教授お願いします。
0
