React映射后端数据出现Promise非法子元素、useState读取null报错

两个报错的核心触发原因是React函数组件被定义成了async异步函数：

• React要求函数组件必须直接返回JSX/Null等可渲染内容，异步函数执行后返回的是Promise对象，React无法渲染Promise，直接抛出第一个Objects are not valid as a React child错误
• 异步组件会破坏React Hook的调用上下文，导致useState等Hook无法正常获取React实例上下文，连锁触发第二个Cannot read properties of null (reading 'useState')错误

除此之外代码里还有3个会导致功能异常的隐藏问题：

• 后端接口直接返回图片文件名数组，没有包裹data字段，前端写的setimageArray(json.data)实际会拿到undefined
• 前端遍历数组时给Picture组件传的是number属性，但组件内部读取的是props.name，最终图片src会拼成/img/undefined，加载不出图片
• 后端用相对路径读取图片文件夹，服务启动时的工作目录变化就会导致读不到目标文件夹，稳定性差

前端修复 #

1. 移除Collage组件定义前的async关键字，React组件永远不能声明为异步函数
2. 调整接口响应取值逻辑，适配后端直接返回数组的格式
3. 修正Picture组件的传参，保证props名和组件内读取的字段一致
4. 补全图片路径的collection层级（后端读取的是collection文件夹，原src路径少了这层）
5. 增加请求异常捕获，避免接口报错时loading状态一直卡住

修正后的前端完整代码：

import React, { useEffect, useState } from 'react';

function Picture(props){
    return( 
        <div className="col-lg-4 col-md-3">
            <img alt={props.alt} className="collageImage img-responsive" src={`/img/collection/${props.name}`} />
        </div>
    )
}

function Collage() {
    const [loading, setLoading] = useState(true);
    const [imageArray, setimageArray] = useState([]);

    const getAnswer = async () => {
        try {
            const res = await fetch("http://localhost:3001/api/getimages");
            const files = await res.json();
            setimageArray(files);
        } catch (err) {
            console.error('加载图片列表失败:', err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        getAnswer();
    }, []);

    if(loading){
        return(<div>Loading....</div>)
    }
    return(
        <div className="imagesSection">
            <div className="container-fluid">
                <div className="row">
                    {imageArray.map((image) => (
                        <Picture 
                            key={image}
                            name={image}
                            alt={image} 
                        />
                    ))}
                </div>
            </div>
        </div> 
    )
}

export default Collage

后端修复 #

1. 把fs读取的文件夹路径改成基于__dirname的绝对路径，避免相对路径的工作目录问题
2. 增加错误响应逻辑，读文件失败时不要让前端请求挂起
3. 增加图片后缀过滤，剔除.DS_Store这类系统隐藏的非图片文件

修正后的后端接口代码：

const path = require('path');
app.get("/api/getimages", cors(corsOptions), (req, res)  => {
    const imgDir = path.join(__dirname, "client/public/img/collection");
    fs.readdir(imgDir, function (err, files) {
        if (err) {
            console.log('Unable to scan directory: ' + err);
            return res.status(500).send({error: 'Failed to load image list'});
        } 
        // 只保留常见格式的图片文件
        const imageFiles = files.filter(file => /\.(jpg|jpeg|png|gif|webp)$/i.test(file));
        res.send(imageFiles);
    });
});

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