如何從內部使用的異步 function 返回一個值。map function 在 React 中？

Question

所以我用谷歌搜索了一下，我發現異步 function 返回 promise 可以在異步 function 之后通過 using.then() 訪問結果值。 這就是它無法正確渲染的原因。 我的問題是：如何從這個 promise inside.map 呈現實際值？

const storageRef = firebase.storage().ref("/assets")

const [productList, setProductList] = useState([])

useEffect(() => {
    Axios.get("http://localhost:3001/product/get").then((response) => {
        setProductList(response.data)
    })  
}, [])

const getImage = async (bannerImage) => {
    const url = await storageRef.child(bannerImage).getDownloadURL();
    return url;   
}

Map function（返回Error: Objects are not valid as a React child (found: [object Promise]) ）：

{productList.map((val) => {
    return (
        <div key={val.id} className="product">
            <div className="item">
                <h1>Product title: {val.title}</h1>
                <h2>Price: {val.price}</h2>
                <h2>Quantity: {val.quantity}</h2>
                <h2>IMG: {getImage(val.bannerImage)}</h2>
            </div>
        </div>
    ) 
})}

Answer 1

因此，正如@Chris-G 建議的那樣，您可以 map over response.data中的.then鏈接到Axios.get到 go ，獲取您需要的圖像 URL 渲染的對象。 例子：

const storageRef = firebase.storage().ref("/assets");
const getImage = async (bannerImage) => {
    const url = await storageRef.child(bannerImage).getDownloadURL();
    return url;   
}

const [productList, setProductList] = useState([])

useEffect(() => {
    Axios.get("http://localhost:3001/product/get").then((response) => {
        Promise.all(response.data.map(async (rawProduct) => {
            const renderReadyProduct = {
                title: rawProduct.title,
                price: rawProduct.price,
                quantity: rawProduct.quantity
            };
            renderReadyProduct.img = await getImage(rawProduct.bannerImage);
            return renderReadyProduct;
        })).then((newProductList) => setProductList(newProductList));
    });
}, [])