电商网站TypeError求助：无法读取null的image属性

核心问题定位 #

你遇到的TypeError: Cannot read properties of null (reading 'image')，本质是从localStorage读取的购物车数组内所有元素均为null，渲染时尝试访问null的image属性触发报错。

逐步排查步骤 #

1. 检查localStorage写入逻辑 #

重点查看localStorage.js中的购物车存储方法（如saveCart类函数）：

• 确认写入前的商品数据是否完整，是否存在接口请求失败后直接将null推入购物车再存储的逻辑
• 验证写入时是否正确使用JSON.stringify()序列化数据，避免直接存储未序列化的对象或null数组
• 排查是否有批量操作逻辑错误，导致把null批量写入购物车数组

2. 验证localStorage真实存储内容 #

在浏览器控制台执行以下命令，查看实际存储的数据：

console.log(JSON.parse(localStorage.getItem('cart')))

如果输出的数组确实是5个null，说明问题出在写入环节；如果输出正常但读取时变为null，则问题在读取逻辑。

3. 排查CartScreen.js的读取逻辑 #

• 确认读取时是否正确使用JSON.parse()反序列化数据，避免直接读取字符串格式的存储内容
• 检查读取后是否存在错误的过滤/转换逻辑，导致数组元素被置为null
• 排查异步逻辑冲突：比如在localStorage写入完成前就执行读取操作，导致拿到初始的null数组

4. 对比历史正常版本的差异 #

既然此前搭建未出现问题，对比当前代码与历史版本：

• 是否修改过localStorage.js的读写方法
• 是否新增了购物车添加逻辑，比如添加商品时接口异常处理不当，将null存入购物车
• 是否修改过商品数据结构，导致旧的localStorage数据无法正常解析

临时修复建议 #

若需快速验证功能，可先清空localStorage中的购物车数据，再重新添加商品测试：

localStorage.removeItem('cart')

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