React中如何避免未定义元素导致应用崩溃的问题

你遇到的问题根源是直接通过索引访问数组元素时，若数组长度不足，对应位置的元素为undefined，再访问其img属性就会触发报错——比如sixb[3]不存在时，sixb[3].img会抛出Cannot read properties of undefined (reading 'img')错误，导致应用崩溃。下面提供两种实用解决方案：

方案1：循环生成6个容器（推荐） #

避免硬编码6个div，用循环统一处理所有容器，同时做元素存在性检查：

{Array.from({ length: 6 }).map((_, index) => {
  const diceItem = sixb[index];
  return (
    <div key={index} className='blocksix all'>
      {/* 有图片元素就渲染img，否则渲染带背景的div */}
      {diceItem ? <img src={diceItem.img} /> : <div className='dice-background'></div>}
    </div>
  );
})}

• Array.from({ length: 6 })生成一个长度为6的空数组，确保能循环出固定数量的容器
• 每个循环先获取对应位置的数组元素，存在则渲染图片，不存在则显示背景样式容器
• 这里用index作为key（当前场景下可行，若后续有动态数据更新，建议改用元素唯一id）

方案2：单个容器添加存在性检查（适合硬编码场景） #

如果要保留硬编码的6个div，给每个容器添加前置判断，避免访问undefined的属性：

<div className='blocksix all'>
  {sixb[0] ? <img src={sixb[0].img} /> : <div className='dice-background'></div>}
</div>
<div className='blocksix all'>
  {sixb[1] ? <img src={sixb[1].img} /> : <div className='dice-background'></div>}
</div>
<!-- 剩余4个容器按相同逻辑编写 -->

• 用三元运算符判断元素是否存在，存在则渲染图片，否则显示背景容器
• 也可以用可选链操作符简化判断：sixb[0]?.img，但仍需配合条件渲染来展示背景样式

补充说明 #

优先选择方案1，代码更简洁易维护——后续若要调整容器数量，只需修改length的值，无需重复修改多个div。

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