React项目遍历产品images数组时出现undefined报错的解决方法

问题出在组件初始化阶段：你把proData的初始状态设为空对象{}，这时候解构出来的images是undefined，组件第一次渲染时调用map()就会触发“无法读取undefined的属性”错误。下面是几种直接有效的解决方式：

方法1：初始化时给images设置默认空数组 #

修改useState的初始值，提前给images赋空数组，确保组件第一次渲染时images是合法的数组类型：

const [proData, setProData] = useState({ images: [] })

方法2：使用可选链操作符（推荐） #

在map()前添加?.，当images为undefined或null时，会直接返回undefined，不会执行后续的map操作：

{
  images?.map((item, i) => (
    <div key={`smi${i}`} className=""><img className='max-h-[200px]' src={item} alt={`product-image-${i}`} /></div>
  ))
}

顺便给alt属性加个有意义的内容，符合无障碍规范。

方法3：条件渲染判断 #

通过&&判断images是否存在，只有当images为真时才执行map：

{
  images && images.map((item, i) => (
    <div key={`smi${i}`} className=""><img className='max-h-[200px]' src={item} alt={`product-image-${i}`} /></div>
  ))
}

这三种方法都能解决你的问题，其中方法2的可选链操作符是React项目中最常用的简洁写法。

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