HarmonyOS鸿蒙Next中使用ForEach渲染动态列表时，删除中间项后UI错乱

新手常见的问题：

键值生成规则

在ForEach循环渲染过程中，系统会为每个数组元素生成一个唯一且持久的键值，用于标识对应的组件。当键值变化时，ArkUI框架会视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。

ForEach提供了一个名为keyGenerator的参数，这是一个函数，开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数，则ArkUI框架会使用默认的键值生成函数，即(item: Object, index: number) => { return index + ‘__’ + JSON.stringify(item); }。

ArkUI框架对于ForEach的键值生成有一套特定的判断规则，这主要与itemGenerator函数和keyGenerator函数的第二个参数index有关。具体的键值生成规则判断逻辑如下图所示。

键值生成示例:

interface ChildItemType {
  str: string;
  num: number;
}
@Entry
@Component
struct Index {
  [@State](/user/State) simpleList: Array<ChildItemType> = [
    { str: 'one', num: 1 },
    { str: 'two', num: 2 },
    { str: 'three', num: 3 }
  ];
  build() {
    Row() {
      Column() {
        ForEach(this.simpleList, (item: ChildItemType, index: number) => {
          ChildItem({ str: item.str, num: index }) // 组件生成函数中使用index参数
        }, (item: ChildItemType, index: number) => {
          return item.str; // 建议在键值生成函数中使用与UI界面相关的数据属性str
        })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}
@Component
struct ChildItem {
  @Prop str: string = '';
  @Prop num: number = 0;
  build() {
    Text(this.str)
      .fontSize(50)
  }
}

在上述示例中，当组件生成函数声明index时，建议键值生成函数也声明index参数，以避免渲染性能降低和渲染结果非预期。同时建议在键值生成函数实现中使用与UI相关的数据属性，在本示例中，数据属性str与UI界面显示相关，因此建议将其作为键值生成函数的返回值。

渲染结果非预期

在本示例中，通过设置ForEach的第三个参数KeyGenerator函数，自定义键值生成规则为数据源的索引index的字符串类型值。当点击父组件ForEachAbnormal中“Insert Item After First Item”文本组件后，界面会出现非预期的结果。

@Entry
@Component
struct ForEachAbnormal {
  [@State](/user/State) simpleList: Array<string> = ['one', 'two', 'three'];
  build() {
    Column() {
      Button() {
        Text('Insert Item After First Item').fontSize(30)
      }
      .onClick(() => {
        this.simpleList.splice(1, 0, 'new item');
      })
      ForEach(this.simpleList, (item: string) => {
        ForEachAbnormalChildItem({ item: item })
      }, (item: string, index: number) => index.toString())
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}
@Component
struct ForEachAbnormalChildItem {
  @Prop item: string;
  build() {
    Text(this.item)
      .fontSize(30)
  }
}

ForEach在首次渲染时，创建的键值依次为"0"、“1”、“2”。

插入新项后，数据源simpleList变为[‘one’, ‘new item’, ‘two’, ‘three’]，框架监听到@State装饰的数据源长度变化触发ForEach重新渲染。

ForEach依次遍历新数据源，遍历数据项"one"时生成键值"0"，存在相同键值，因此不创建新组件。继续遍历数据项"new item"时生成键值"1"，存在相同键值，因此不创建新组件。继续遍历数据项"two"生成键值"2"，存在相同键值，因此不创建新组件。最后遍历数据项"three"时生成键值"3"，不存在相同键值，创建内容为"three"的新组件并渲染。

从以上可以看出，当键值包含数据项索引index时，期望的界面渲染结果为[‘one’, ‘new item’, ‘two’, ‘three’]，而实际的渲染结果为[‘one’, ‘two’, ‘three’, ‘three’]，不符合开发者预期。因此，开发者在使用ForEach时应避免键值包含索引index。