Javascript 如何从React中的.map函数内部使用的异步函数返回值？

所以我在谷歌上搜索了一下，发现异步函数返回的承诺是，在这个异步函数之后使用.then（）可以访问哪个结果值。这就是它无法正确渲染的原因。我的问题是：如何在.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;   
}

映射函数（返回

错误：对象作为React子对象无效（找到：[object Promise]）

）：

{productList.map（（val）=>{
返回(
产品名称：{val.title}
价格：{val.Price}
数量：{val.Quantity}
IMG:{getImage（val.bannerImage）}
) 
})}

因此，正如@Chris-G所建议的，您可以映射

中的
响应.数据
。然后

链接到

Axios上。获取

继续，获取图像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));
    });
}, [])

---

与呈现productList的方式相同。它也是异步的。然而我建议找到一种比在循环中发送ajax请求更好的获取数据的方法。理想情况下，将其作为产品数据的一部分返回，或者一次请求所有图像。问题在于

getImage

函数。它会返回一个承诺，而您正试图兑现它。解决方案是在加载

产品列表后执行与
产品列表相同的操作。类似于：
const-images=wait-Promise.all（response.data.map（val=>storageRef.child（val.bannerImage.getDownloadURL（））
是否有原因不想在
中调用
getImage
。然后调用
Axios.get
调用
useEffect
？因为我想为productList中的每个产品对象渲染每个图像。每个产品都有bannerImage属性，该属性必须与url匹配。如果这是一个愚蠢的问题，我很抱歉。这是一个学校的项目，所以我必须做它，虽然我是新的反应。我只有3个月的时间来学习React并创建这个电子商务网站项目。
因为我想为productList中的每个产品对象渲染每个图像
，但这并不意味着你不能按照Jared的建议去做。你还得这么做。同样：方法是在加载产品列表并将其放入状态数组之后立即从数据库加载图像URL。现在您可以使用该阵列显示图像。谢谢！我无法访问
val.bannerImage
，因为在所有这些代码之后，我正在初始化return（）中的val变量。更具体地说：我有一个函数组件，然后我把你的代码包装在里面，然后在你的代码后面我有return（），在这个return里面我有上面提到的地图，它以div的形式呈现产品。对了，我刚刚编辑了这一行。非常感谢。你解决了我八小时的难题：D
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));
    });
}, [])