React项目重启后出现Uncaught TypeError: Cannot read properties of undefined (reading '0')

错误定位 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading '0')错误，根源在这一行代码：

style={{ "--img": `url(${movie.backdrops[0]})` }}

当API返回的某条电影数据中，backdrops字段为undefined，或者是一个空数组时，尝试访问[0]就会触发这个错误。

为什么之前正常现在出错？ #

大概率是你的Spring API返回的数据发生了变化——之前返回的所有电影条目都包含非空的backdrops数组，但现在有一条或多条电影数据缺失了这个字段，或者backdrops是空数组。

修复方案 #

你可以选择以下几种方式解决：

1. 用可选链+空值合并运算符做兜底 #

修改样式行的代码，给backdrops[0]加上保护，同时提供默认图片：

style={{ "--img": `url(${movie.backdrops?.[0] || '/path/to/default-backdrop.jpg'})` }}

• ?.是可选链操作符：如果backdrops是undefined，会直接返回undefined，不会继续访问[0]
• ||是空值合并运算符：如果backdrops?.[0]不存在，就用你指定的默认图片路径替代

2. 提前过滤无效数据 #

在渲染前先过滤掉没有有效backdrops的电影，只保留能正常渲染的条目：

movies?.filter(movie => movie.backdrops && movie.backdrops.length > 0).map((movie) => {
    // 原map内的代码不变
})

3. 双重可选链保护（极简版） #

如果暂时不需要默认图，也可以直接用双重可选链避免报错：

style={{ "--img": `url(${movie.backdrops?.[0]})` }}

这种情况下，当backdrops无效时，url()会传入undefined，页面上该轮播项的背景会显示为空，但不会抛出错误。

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