React中如何渲染array.map()内异步函数返回的JSX？

核心问题 #

你直接在gallery.map()里调用异步函数renderImage，但async函数本质上返回的是Promise对象，React没办法把Promise当作有效的元素渲染，所以才会抛出"Objects are not valid as a React child"错误。而且React的渲染流程是同步的，不会等异步函数执行完再渲染，这就是页面没内容的根本原因。

正确实现思路 #

别在渲染逻辑里做异步请求，应该提前把所有图片的预签名URL都获取到，存进state之后再渲染：

1. 新增一个state，用来存储带预签名URL的完整图片数据
2. 拿到gallery数组后，批量请求每个图片的预签名URL
3. 等所有URL都获取完成，更新state再开始渲染

修改后的代码 #

import { useEffect, useState } from "react";

export default function Gallery (){
    const [isLoading, setIsLoading] = useState(true);
    const [gallery, setGallery] = useState([]);
    // 新增state存带预签名URL的图片数据
    const [galleryWithUrls, setGalleryWithUrls] = useState([]);

    useEffect( ()=> {
        const fetchGallery = async () => {
            // 这里替换成你实际获取gallery数组的API请求
            const galleryData = await fetch('你的画廊数据API地址').then(res => res.json());
            setGallery(galleryData);
            
            // 批量请求所有图片的预签名URL
            const galleryWithUrlsData = await Promise.all(
                galleryData.map(async (item) => {
                    const photo = item.PHOTO;
                    const data = await fetch(`http://1.1.1.1:4000/s3/vegan-mundi-gallery/${photo}`);
                    const preSignedUrl = await data.json();
                    // 返回包含原数据和预签名URL的对象
                    return { ...item, preSignedUrl };
                })
            );
            
            setGalleryWithUrls(galleryWithUrlsData);
            setIsLoading(false);
        };

        fetchGallery();
    } , []);


    if (isLoading){
        return(<p>loading...</p>);
    }
    else {
        return (
            <div>
                {
                    galleryWithUrls.map((image) => (
                        <figure key={image.PHOTO}>
                            <div>
                                <img 
                                    src={image.preSignedUrl}
                                    alt={image.LABEL}
                                />
                            </div>
                            <figcaption>{image.LABEL}</figcaption>
                        </figure>
                    ))
                }
            </div>
        )
    }
}

关键修改点 #

• 把异步请求从渲染阶段移到useEffect里，确保渲染前就准备好所有数据
• 用Promise.all批量处理URL请求，比逐个请求效率更高
• 新增galleryWithUrls存储处理后的完整数据，渲染时直接用同步数据
• 把React的key放在最外层的<figure>上，符合React的key使用规范（不要放在内部的<img>上）

额外优化建议 #

• 可以给单个图片加独立的加载状态，不用等全部加载完再显示
• 加上错误捕获逻辑，处理请求失败的情况，避免页面卡死

内容的提问来源于stack exchange，提问作者GenerikError