HarmonyOS鸿蒙Next中Repeat组件修改数据源时templateId异常

HarmonyOS鸿蒙Next中Repeat组件修改数据源时templateId异常

官网代码,数据对象改成TT , 点击按钮重新赋值50个数据。 但是点击后变成最后5个绿色,倒数[6,10]是蓝色

@ObservedV2
class TT{
  @Trace index=1
  @Trace name="r"

  constructor(index: number, name: string) {
    this.index = index;
    this.name = name;
  }
}
@Entry
@ComponentV2 // 推荐使用V2装饰器
struct Index {
  @Local dataArr: Array<TT> = []; // 数据源

  aboutToAppear(): void {
    for (let i = 0; i < 50; i++) {
      this.dataArr.push(new TT(i,`data ${i}`)); // 为数组添加一些数据
    }
  }

  build() {
    Column() {
      Button("change").onClick(() =>{
        this.dataArr.splice(0,this.dataArr.length);
        for (let i = 0; i < 50; i++) {
          this.dataArr.push(new TT(i+10,`dataF ${i}`)); // 为数组添加一些数据
        } //有bug????
      })
      List() {
        Repeat<TT>(this.dataArr)
          .each((ri: RepeatItem<TT>) => { // 默认模板
            ListItem() {
              Text('default_' +  `${ri.item.index}  ${ri.item.name}`).fontSize(30).fontColor(Color.Red) // 文本颜色为红色
            }
          })
          .key((item: TT, index: number): string => `${item.index} ${item.name}`) // 键值生成函数
          // .virtualScroll({ totalCount: this.dataArr.length }) // 打开virtualScroll模式,totalCount为期望加载的数据长度
          .templateId((item: TT, index: number): string => { // 根据返回值寻找对应的模板子组件进行渲染
            let template= index <= 4 ? 'A' : (index <= 10 ? 'B' : '');
            console.error(`templateId  ${item.index} ${item.name} => ${template}`)
            return template
          })
          .template('A', (ri: RepeatItem<TT>) => { // 'A'模板
            ListItem() {
              Text('ttype_A_' +  `${ri.item.index}  ${ri.item.name}`).fontSize(30).fontColor(Color.Green) // 文本颜色为绿色
            }
          }, { cachedCount: 3 }) // 'A'模板的缓存列表容量为3
          .template('B', (ri: RepeatItem<TT>) => { // 'B'模板
            ListItem() {
              Text('ttype_B_' +   `${ri.item.index}  ${ri.item.name}`).fontSize(30).fontColor(Color.Blue) // 文本颜色为蓝色
            }
          }, { cachedCount: 4 }) // 'B'模板的缓存列表容量为4.

      }
      .cachedCount(2) // 容器组件的预加载区域大小
      .height('70%')
      .border({ width: 1 }) // 边框
    }
  }
}

手机系统5.0.0.150 SP8 
DevEco Studio 5.0.4 Release
Build #DS-233.14475.28.36.5011100
Build Version: 5.0.11.100, built on March 28, 2025
Runtime version: 17.0.12+1-b1087.25 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Windows 10.0
GC: G1 Young Generation, G1 Old Generation
Memory: 4054M
Cores: 16
Registry:
 idea.plugins.compatible.build=IC-233.14475.28
HarmonyOS 5.0.4 Release SDK, inclusion of OpenHarmony SDK Ohos_sdk_public 5.0.4.150 (API Version 16 Release) as is.

更多关于HarmonyOS鸿蒙Next中Repeat组件修改数据源时templateId异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

点击前显示如图

更多关于HarmonyOS鸿蒙Next中Repeat组件修改数据源时templateId异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


点击后显示如下

图片

在HarmonyOS鸿蒙Next中,使用Repeat组件时,如果修改数据源后出现templateId异常,可能是由于数据源更新后未正确同步到UI层。建议检查以下几点:

  1. 数据源更新:确保数据源更新后调用this.$setthis.$forceUpdate强制刷新视图。
  2. templateId唯一性:确保每个templateId在数据源中是唯一的,避免重复。
  3. 生命周期:在onChangeonUpdate生命周期中处理数据源更新逻辑。
  4. 调试:使用开发者工具检查数据源和templateId的绑定情况。

如果问题仍未解决,建议查阅官方文档或提交Issue。

回到顶部