HarmonyOS 鸿蒙Next 嵌套层级较多，导致状态管理不能刷新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 })
}
}