在React中使用map()渲染图片时出现调用栈错误

核心问题 #

你这段代码的错误根源是重复且错误地处理了已有的base64图片数据：

• 你的data数组中，el.img.data本身就是base64格式的字符串，但你却将它当作二进制数据传入Uint8Array，这会触发类型错误。
• 后续的btoa转码操作完全多余——base64字符串不需要再进行编码，错误的处理逻辑会导致React渲染时抛出异常，最终引发调用栈溢出。

修正后的代码 #

data.map((el) => {
  // 直接使用已有的base64数据，无需额外转码
  return <img key={el.id} src={`data:image/png;base64,${el.img.data}`} />;
});

关键注意事项 #

• 必须给列表中的每个<img>元素添加唯一的key属性（这里用el.id刚好合适），这是React列表渲染的强制要求，能避免不必要的重渲染和潜在的渲染循环问题，也是解决调用栈错误的关键一步。
• 确认el.img.data是纯base64字符串（不包含data:image/png;base64,前缀），如果数据本身已经带了前缀，直接将src设为el.img.data即可，无需拼接前缀。

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