HarmonyOS Repeat无法正确刷新

在Repeat里如果使用@Builder，更新数据源时无法正确刷新，ForEach就可以。下面代码可以稳定复现，点击Button后，只有Repeat里的builder显示错误。

// xxx.ets

@ObservedV2
class HomeState {
  @Trace tabs: string[] = ['1']
}

@Entry
@ComponentV2
struct RepeatBugExample {
  @Local state = new HomeState()
  build() {
    Column({space: 20}) {
      Button('change state')
        .onClick(() => {
          this.state.tabs[0] = '3'
        })
      Column({space: 4}) {
        Repeat(this.state.tabs).each((e) => {
          Text(`Repeat: ${e.item}`)
          buildText(`Use builder in Repeat: ${e.item}`)
        })
        ForEach(this.state.tabs, (e:string) => {
          Text(`ForEach: ${e}`)
          buildText(`Use builder in ForEach: ${e}`)
        })
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }

  renderLog(name: string) {
    console.log(`log ${name}`)
    return 1
  }
}

@Builder
function buildText(name: string) {
  Text(name)
}

HarmonyOS

fox280

2025-01-09 16:19:44

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

可以使用以下方式：

@ObservedV2
class HomeState {
  @Trace tabs: string[] = ['1']
}

@Entry
@ComponentV2
struct RepeatBugExample {
  @Local state = new HomeState()
  build() {
    Column({space: 20}) {
      Button('change state')
        .onClick(() => {
          this.state.tabs[0] = '3'
        })
      Column({space: 4}) {
        Repeat(this.state.tabs).each((e) => {
          Text(`Repeat: ${e.item}`)
          buildText(e)
        })
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }

  renderLog(name: string) {
    console.log(`log ${name}`)
    return 1
  }
}

@Builder
function buildText(e: RepeatItem<string>) {
  Text(`Use builder in Repeat: ${e.item}`)
}