问题背景

在开发一号店购物车功能时，遇到了两个与删除选中商品相关的Bug。这些Bug涉及到列表渲染、数组下标变化和状态管理等问题。下面我将详细介绍这两个Bug的产生原因和解决方案。

Bug1：数组重新渲染导致下标错乱

问题描述

当删除购物车中的选中数据后，数组会重新渲染，导致下标重新计算，选中状态也被初始化。

产生原因

在ArkUI框架中，当使用ForEach渲染列表时，默认情况下系统会使用数组下标(index)作为组件的唯一标识（键值）。当删除数组中的某个元素后，剩余元素的下标会发生变化，这会导致框架无法正确识别哪些组件应该被保留或删除。

解决方案

给ForEach添加第三个参数，使用数据的唯一ID作为自定义标识符：

List() {
    ForEach(this.list, (item: CartGood, index: number) => {
        ListItem() {
            GoodsListItem({ item: item })
        }
       // 向左滑出现删除按钮
        .swipeAction({ end: this.delItem(item.id) })
        }, (item: CartGood, index: number) => {
              return item.id
})

通过这种方式，即使数组下标发生变化，框架也能根据商品ID正确识别和更新组件。

Bug2：删除功能失效

问题描述

在实现了自定义标识后，发现删除功能有时会失效，选中的元素无法正确删除。

产生原因

虽然使用了自定义标识解决了渲染问题，但在删除逻辑中仍然依赖数组下标进行操作，导致删除功能不稳定。

解决方案

修改删除函数，基于商品ID进行筛选操作：

delItem(id: string) { // 重现传递参数
  Text('删除')
    .width(60)
    .height('100%')
    .backgroundColor(Color.Red)
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)
    .onClick(() => {
      this.list = this.list.filter(item => item.id !== id) // 使用自定义标识进行筛选
    })
}

这里我们使用filter方法，保留所有ID不等于目标ID的商品，从而实现稳定的删除功能。

总结

在开发购物车删除功能时，主要遇到了两个问题：

1. 1.

   数组重新渲染导致的下标错乱问题 - 通过为ForEach添加自定义标识解决

2. 2.

   删除功能失效问题 - 通过基于唯一ID进行筛选操作解决

这两个问题的解决思路都围绕着"使用唯一标识而非数组下标"这一核心原则。在开发列表相关的功能时，特别是在涉及增删改操作时，使用稳定的唯一标识符是非常重要的最佳实践。