我在 Firestore 資料庫中有一個類似的功能集合。
{
id: 1
title: Title1,
subtitle: Subtitle2
image: features/feature-1.png //point folder name and image name in storage
}
但是為了在 React 中使用這個影像，我需要把這個影像轉換成真正的字串 URL
出于這個原因，Firebase 提供了類似的東西
const getImage = async (imageName:string) => {
const starsRef = ref(storage, imageName);
const imageUrl = await getDownloadURL(starsRef);
return imageUrl;
}
所以這個函式把我的影像（features/feature-1.png）轉換成類似的東西 https://firebasestorage.googleapis.com/v0/b/example-app.appspot.com/o/features/feature- 1.png?alt=媒體&token=a999dfce-ee3a-4e02-95a1-6784e5afb9b9
所以我需要回圈我的 Firestore 并每次運行這個函式來獲取真實的 URL。
const featuresFunc = async () => {
const featureRef = collection(db, "Features");
const data = await getDocs(featureRef);
let arr:any = [];
data.forEach(async (doc:any) => {
arr.push({...doc.data(), image: await getImage(doc.data().image)});
})
console.log(arr)
}
但它回傳[]陣列。
這是一頁的完整代碼；
import { useEffect} from "react";
import {db, storage} from "../../firebase/config"
import { getDocs, collection } from "firebase/firestore";
import {ref, getDownloadURL } from 'firebase/storage'
const Features = () => {
const getImage = async (imageName:string) => {
const starsRef = ref(storage, imageName);
const imageUrl = await getDownloadURL(starsRef);
return imageUrl;
}
const featuresFunc = async () => {
const featureRef = collection(db, "Features");
const data = await getDocs(featureRef);
let arr:any = [];
data.forEach(async (doc:any) => {
arr.push({...doc.data(), image: await getImage(doc.data().image)});
})
console.log(arr);
}
useEffect(() => {
featuresFunc();
},[])
return null;
};
export default Features;
概括;
我想從 Firebase Store 獲取我的物件并將其轉換為具有真實影像 URL 的新物件。
像那樣：
{title: "title1", image: features/feature-1.png, .....}
{title: "title2", image: features/feature-2.png, .....}
//into
{title: "title1", image: https://firebasestorage.googleapis.com/v0/b/example1, .....}
{title: "title2", image: https://firebasestorage.googleapis.com/v0/b/example2, .....}
uj5u.com熱心網友回復：
發生這種情況是因為您await在forEach回圈中使用。在這段代碼中：
const featuresFunc = async () => {
const featureRef = collection(db, "Features");
const data = await getDocs(featureRef);
let arr:any = [];
data.forEach(async (doc:any) => {
arr.push({...doc.data(), image: await getImage(doc.data().image)});
})
console.log(arr)
}
全部完成console.log(arr)之前的運行。image: await getImage(doc.data().image)
我首選的處理方法是使用Promise.all等待所有承諾完成：
const featuresFunc = async () => {
const featureRef = collection(db, "Features");
const data = await getDocs(featureRef);
let arr:any = [];
let promises = data.docs.map((doc) => getImage(doc.data().image); // ??
let urls = await Promise.all(promises); // ??
data.forEach(async (doc:any, i) => {
arr.push({...doc.data(), image: urls[i] }); // ??
})
console.log(arr)
}
還有其他方法，因此請閱讀此內容以了解更多資訊：Using async/await with a forEach loop
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/420904.html
標籤：
上一篇：計算值
下一篇：如何在點擊中心繪制SVG元素？