如何修复TypeError: Cannot read properties of undefined (reading 'price')错误？

问题分析 #

出现TypeError: Cannot read properties of undefined (reading 'price')的核心原因有两个：

1. 变量命名冲突：totalPrice函数里的reduce回调将第二个参数命名为basket，和全局的购物车数组basket重名，导致无法正确访问购物车项的productID属性，最终products.find找不到对应商品，返回undefined。
2. 未处理商品不存在的边界情况：即使命名正确，当购物车中存在products数组里没有的productID时，find方法会返回undefined，直接访问product.price就会触发报错。

修复后的代码 #

let basket = JSON.parse(localStorage.getItem('basket')) || []
const products = [
    {
        id: 1,
        title: 'MacBook Pro 2021',
        price: 40000
    },
    {
        id: 2,
        title: 'Keychron K6',
        price: 100
    },
    {
        id: 3,
        title: 'NuPhy Halo65',
        price: 140
    }
]

function saveToStorage() { ... }

function addBasket(productID) { ... }

function removeBasket(productID) { ... }

function totalPrice() {
    return basket.reduce((prev, item) => {
        // 修复命名冲突：将回调参数改为item，避免覆盖全局basket变量
        const product = products.find(p => p.id === item.productID)
        // 处理商品不存在的情况：若product为undefined，该商品贡献金额为0
        return prev += product ? (product.price * item.amount) : 0
    }, 0)
}

console.log(totalPrice())

关键修复说明 #

• 重命名reduce回调的第二个参数为item，彻底解决变量命名冲突问题，确保能正确读取购物车项的productID和amount属性。
• 增加商品存在性判断，当找不到对应商品时，直接累加0金额，避免因undefined访问属性触发的报错。

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