React图片上传列表显示异常：首张正常，后续上传图片不显示

你的代码核心问题出在map遍历逻辑上：你没有使用遍历到的单个图片URL，而是把整个file数组直接赋值给了img的src属性。当数组只有一个元素时会被隐式转换为有效字符串显示，但数组包含多个元素时，src会变成类似[object URL, object URL]的无效值，导致后续图片无法加载。另外，React遍历列表时需要给每个元素添加唯一key属性，避免渲染警告。

修正后的代码如下：

function DisImg() {
    const [file, setFile] = useState([]);

    function handleChange(e) {
        const selectedFile = e.target.files[0];
        if (selectedFile) { // 增加判断，避免未选择文件时触发错误
            const fileUrl = URL.createObjectURL(selectedFile);
            setFile(prevV => [...prevV, fileUrl]);
        }
    }

    return (
        <>
            {/* 需要一次性选多张图的话，可添加multiple属性 */}
            <Input type="file" onChange={handleChange}>Choose file</Input>
            {
                file.map((imgUrl, index) => {
                    // 使用遍历到的单个URL作为src，添加index作为key（生产环境建议用更唯一的标识）
                    return <img key={index} src={imgUrl} alt="documents" height="50px" width="50px" />
                })
            }
        </>
    );
}

额外优化建议：

• 如果需要支持一次性选择多张图片，给Input添加multiple属性，并修改handleChange遍历所有选中文件：

function handleChange(e) {
    const files = Array.from(e.target.files);
    const fileUrls = files.map(file => URL.createObjectURL(file));
    setFile(prevV => [...prevV, ...fileUrls]);
}

内容的提问来源于stack exchange，提问作者samyak.m