动态渲染多张图片（仅存在时）遇空值报错的解决方案求助

问题根源 #

你的代码在gallery.img_urls为有效数组时能正常工作，但当gallery本身为null，或者img_urls是null/非数组值时，调用map会直接报错——因为map是数组专属方法，null、undefined这类值不具备该方法。

解决方案 #

方案1：用空数组兜底（最简洁）

通过空值合并运算符||，把可能为null/undefined的img_urls转为空数组，确保map始终能安全执行（空数组调用map不会产生任何元素，也不会报错）：

{(gallery?.img_urls || []).map((img, i) => (
  <div key={i}>
    <img src={img} alt="gallery" />
  </div>
))}

• 当gallery为null时，gallery?.img_urls返回undefined，|| []会将其替换为空数组
• 当img_urls为null时，同样会被替换为空数组
• 空数组的map操作不会渲染任何内容，完美适配无图片的场景

方案2：先校验类型再渲染（更严谨）

如果需要严格校验数据类型，可以先判断img_urls是否为数组，再执行map：

{gallery?.img_urls && Array.isArray(gallery.img_urls) ? 
  gallery.img_urls.map((img, i) => (
    <div key={i}>
      <img src={img} alt="gallery" />
    </div>
  )) : null}

• 先通过gallery?.img_urls确保img_urls存在，再用Array.isArray验证它是数组类型
• 不满足条件时返回null，不会渲染任何内容

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