React多图片上传后预览异常问题排查

先从状态更新逻辑查起——React的状态更新依赖不可变值，如果你直接修改原数组再调用set方法，React会判定状态未发生变化，不会触发组件重渲染。比如你之前可能写了这类错误代码：

// 错误示例：直接修改原数组
MultipleImagesSrc.push(newImageBase64);
setMultipleImagesSrc(MultipleImagesSrc);

改成函数式更新+扩展运算符生成新数组的写法：

// 正确写法：基于旧状态创建新数组
setMultipleImagesSrc(prevImages => [...prevImages, newImageBase64]);

接着检查渲染部分：

1. 遍历数组时必须给每个img元素添加唯一key，避免React复用DOM导致渲染异常：

{MultipleImagesSrc.map((src, idx) => (
  <img 
    key={idx}  // 也可以用图片的唯一标识（如文件名哈希）替代索引
    src={src} 
    alt={`产品图片 ${idx+1}`} 
    className="w-24 h-24 object-cover rounded"
  />
))}

2. 确认每个src对应的base64字符串带有完整的Data URI前缀（比如data:image/jpeg;base64,），缺少前缀的话浏览器无法识别为图片资源。

另外，Next.js中如果使用next/image组件渲染base64图片，需要开启unoptimized配置；如果只是简单预览，用原生img组件会更省心。

如果问题仍存在，把状态更新和渲染相关的完整代码片段贴出来，能更快定位具体问题。

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