HarmonyOS鸿蒙Next中请教下数组里的数据处理问题

1.对代码进行优化了楼主可以参考一下，第一次进入页面时：调用 handleControlBtns 初始化按钮数组,后续点击刷新按钮时：只更新 selected，不再 new 对象,ForEach key：使用 code 保证稳定；

2.参考代码：

@ObservedV2
export class controlBtnModel {
  icon: ResourceStr = ''
  text: string = ''
  @Trace selected: boolean = false
  code: number = 0
}

@Entry
@ComponentV2
struct FocusTestPage {
  @Local controlBtns: Array<controlBtnModel> = []
  private controlBtnsTitleList: string[] = ['自动', '轻柔', '中速', '急速']

  aboutToAppear(): void {
    // 初始化时只调用一次 handleControlBtns
    const random = Math.floor(Math.random() * 4)
    this.controlBtns = this.handleControlBtns(this.controlBtnsTitleList, random)
  }

  // 只在初始化时用，生成按钮对象数组
  handleControlBtns(controlBtnsTitleList: string[], index: number): controlBtnModel[] {
    const controlBtns: Array<controlBtnModel> = []
    controlBtnsTitleList.forEach(title => {
      const controlBtn: controlBtnModel = new controlBtnModel()
      switch (title) {
        case '自动':
          controlBtn.text = title
          controlBtn.code = 0
          controlBtn.icon = $r('app.media.foreground')
          break;
        case '轻柔':
          controlBtn.text = title
          controlBtn.code = 1
          controlBtn.icon = $r("app.media.layered_image")
          break;
        case '中速':
          controlBtn.text = title
          controlBtn.code = 2
          controlBtn.icon = $r("app.media.app_icon")
          break;
        case '急速':
          controlBtn.text = title
          controlBtn.code = 3
          controlBtn.icon = $r("app.media.background")
          break;
      }
      controlBtn.selected = index === controlBtn.code
      controlBtns.push(controlBtn)
    })
    return controlBtns
  }

  // 后续刷新时只更新 selected，不再 new 对象
  getStatus() {
    const random = Math.floor(Math.random() * 4)
    this.controlBtns.forEach(btn => {
      btn.selected = (btn.code === random)
    })
  }

  @Builder
  controlBtnBuilder(btn: controlBtnModel, index: number) {
    Column({ space: 5 }) {
      Image(btn.icon)
        .width(25)
        .height(25)
      Text(btn.text)
    }
    .border({
      width: { left: index != 0 ? 1 : 0 },
      color: { left: index != 0 ? '#D4D4DC' : Color.Transparent }
    })
    .backgroundColor(btn.selected ? 'rgba(121,121,121,0.2)' : Color.White)
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .onClick(() => {
      if (btn.selected) {
        return
      }
      this.controlBtns.forEach(item => {
        item.selected = false
      })
      btn.selected = true
    })
  }

  build() {
    Column({ space: 20 }) {
      Row() {
        ForEach(this.controlBtns, (btn: controlBtnModel, index: number) => {
          this.controlBtnBuilder(btn, index)
        }, (item: controlBtnModel) => item.code.toString()) // key 用 code 保证稳定
      }
      .clip(true)
      .margin({ top: 55 })
      .borderWidth(1)
      .borderColor('#D4D4DC')
      .borderRadius(10)
      .height(70)
      .width('100%')

      Button('重新从服务器拿数据')
        .onClick(() => {
          this.getStatus()
        })
    }
    .padding({ left: 16, right: 16 })
    .height('100%')
    .width('100%')
  }
}