HarmonyOS 嵌套层级较多，导致状态管理不能刷新UI

List其中一个ListItem是swiper，swiper中一个item使用了ForEach渲染了2行item。更新最后2行Item中的某一个字段，UI不更新。

let subPickData = this.mergeCellData?.cells[0] as SubPickData  
let moneyPickData = subPickData.cell[0] as MoneyPickData;  
moneyPickData.plateName = '+' + (Math.random() * 100).toFixed(2) + "%";  
moneyPickData.plateChangeRate = '+' + (Math.random() * 100).toFixed(2) + "%";

下面贴出bean的代码：

@Observed  
export class MergeCellData implements CellType {  
  cardData?: CardData;  
  itemType: ItemType;  
  key?: string;  
  cells: ObservedArray<SubPickData | SubEvaluateData> = new ObservedArray();  
  titles: string[] = [];  
}  
@Observed  
export class SubPickData  {  
  subCardData: SubCardData;  
  cell: ObservedArray<MoneyPickData|NewsPickData|BasicPickData|TechnologyPickData> = new ObservedArray();  
  
}  
@Observed  
export class MoneyPickData {  
  plateCode: string;  
  downCount: number;  
  flatCount: number;  
 }  
@Observed  
export class ObservedArray<T> extends Array<T> {  
  constructor(args?: T[]) {  
    if (args instanceof Array) {  
      super(...args);  
    } else {  
      super();  
    }  
  }  
}

下面贴出UI代码：

export struct ChooseStockItem {  
  @ObjectLink @Watch('update') data: MergeCellData;  
  build() {  
    Column() {  
      Swiper(this.controller) {  
        ForEach(this.data?.cells, (subData: SubPickData) => {  
  
          if (subData.subCardData.cardCode == MONEY_PICK) {  
            MoneyPickView({ data: subData.cell })  
              .padding({  
                top: 7,  
                bottom: 16  
              })  
          } else if (subData.subCardData.cardCode == NEWS_PICK) {  
            NewsPickView({ data: subData.cell })  
              .padding({  
                top: 7,  
                bottom: 16  
              })  
          } else if (subData.subCardData.cardCode == BASIC_PICK) {  
            BasicPickView({ data: subData.cell, jumpUrl: subData.subCardData.jumpUrl })  
              .padding({  
                top: 7,  
                bottom: 16  
              })  
          } else if (subData.subCardData.cardCode == TECHNOLOGY_PICK) {  
            TechnologyPickView({ data: subData.cell, jumpUrl: subData.subCardData.jumpUrl })  
              .padding({  
                top: 7,  
                bottom: 16  
              })  
          }  
        }, (subData: SubPickData, index: number) => index.toString() + subData.subCardData.cardCode)  
      }  
      .onAppear(() => {  
        XFLog.e("x", "== MoneyPickViewItem  Swiper ChooseStockItem  onAppear    == ");  
      })  
      .onChange((index: number) => {  
        this.swiperHeight = undefined  
        this.currentIndex = index;  
      })  
      .onAreaChange((_oldValue: Area, newValue: Area) => {  
        this.swiperHeight = newValue.height  
      })  
      .width('100%')  
      .height(this.swiperHeight)  
      .displayCount(1, true)  
      .index($$this.currentIndex)  
      .autoPlay(false)  
      .indicator(false)  
      .cachedCount(4)  
      .loop(false)  
    }  
  }  
}  
@Reusable  
@Component  
export struct MoneyPickView {  
  @ObjectLink @Watch('update') data: ObservedArray<MoneyPickData | NewsPickData | BasicPickData | TechnologyPickData>;  
  build() {  
    Column() {  
      ForEach(this.data, (item: MoneyPickData, index: number) => {  
        MoneyPickViewItem({ data: item, index: index })  
      }, (index: number) => index + '__')  
    }  
  }  
  update(changedPropertyName: string) {  
    XFLog.e("x","MoneyPickViewItem  MoneyPickView  data  == ");  
  }  
}  
@Reusable  
@Component  
struct MoneyPickViewItem {  
  @ObjectLink data: MoneyPickData  
  @Prop index: number  
  build() {  
    Column() {  
      Row() {  
        Text(this.data.fundName)  
          .alignSelf(ItemAlign.Start)  
          .fontSize(14)  
          .fontColor($r('app.color.text_level2'))  
          .onAppear(() => {  
           XFLog.e("x","MoneyPickViewItem  Text  onAppear fundName   == "+this.data.fundName);  
          })  
        if (this.data.fundJumpUrl) {  
          Image($r('app.media.icon_homepage_right_arrow'))  
            .width(16)  
            .height(16)  
            .margin({ left: 2 })  
            .onAppear(() => {  
              XFLog.e("x","MoneyPickViewItem  Image  onAppear fundName   == "+this.data.fundName);  
            })  
            // .syncLoad(true)  
        }  
      }  
    }  
    .alignItems(HorizontalAlign.Start)  
    .margin({ top: getItemSpace(this.index) })  
    .padding({ left: 16, right: 16 })  
  }  
}

HarmonyOS

superinsect

2024-10-15 12:03:02

浏览