Struggling with frontend bugs …

# Vue3 购物车 undefined 错误定位修复

一、典型报错场景复现

报错信息：

```

TypeError: Cannot read properties of undefined (reading 'qty')

at VueComponent.increaseQty (Cart.vue:42)

```

问题代码：

```js

// Cart.vue

const increaseQty = (id) => {

const item = cartList.find(i => i.skuId === id)

item.qty++ // ❌ find 可能返回 undefined

}

const cartList = ref([])

onMounted(async () => {

cartList.value = await getCartApi() // 异步加载

// 组件挂载时按钮已渲染，用户秒点即触发报错

})

```

二、根因定位（3个）

1. 异步竞态：接口未返回时按钮已可点击，find 返回 undefined

2. skuId 类型不一致：接口返回字符串 "1001"，按钮传数字 1001，find 匹配失败

3. 并发删除冲突：批量删除后残留的 debounce 请求仍引用旧项

三、修复方案

```js

// ✅ 1. 加载状态锁，接口未完成禁点

const loading = ref(true)

const increaseQty = (id) => {

if (loading.value) return

// ✅ 2. 统一类型 + 防御性判空

const item = cartList.value.find(i => String(i.skuId) === String(id))

if (!item) {

console.warn(item ${id} not found, refresh cart)

return refreshCart()

}

item.qty = Math.min(item.qty + 1, item.stock) // ✅ 3. 顺手加库存上限

}

```

模板层兜底：

```html

<button :disabled="loading" @click="increaseQty(item.skuId)">+</button>

```

数据初始化兜底：

```js

const cartList = ref([])

// 删除时同步清理待处理队列

const removeFromQueue = (id) => { pendingOps.delete(id) }

```

四、验证清单

| 场景 | 操作 | 预期 |

|---|---|---|

| 弱网 | 限速 Slow 3G 下秒点 + | disabled，无报错 |

| 类型 | 后端返回字符串 skuId | 正常匹配 |

| 快速删改 | 删除后立即点其他行 | 触发 refreshCart，不崩 |

核心原则：find/filter 结果永远先判空；异步数据未就绪时禁止交互；跨端 ID 一律 String() 归一。