@State装饰嵌套结构的变量时,为什么嵌套结构中数组元素增加或减少时界面不会刷新
如下代码点击增加元素或减少元素,增加或减少嵌套在对象中的数组元素,界面不会有变化。
界面代码如下:
@Entry
@Component
struct Index {
@State dataList :TestDataList = new TestDataList([]);
aboutToAppear() {
this.dataList.datas = [new TestData('0',0),new TestData('1',1)];
}
build() {
Column(){
ForEach(this.dataList.datas,(data:TestData)=>{
Text(data.getName());
})
Button('增加元素').onClick((e)=>{
this.dataList.datas.push(new TestData(this.dataList.datas.length+'',this.dataList.datas.length));
}).width('100%')
Button('减少元素').onClick((e)=>{
this.dataList.datas.pop();
}).width('100%')
}.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Start)
}
}
数据类如下:
@Observed
export class TestData {
public value : number;
public name : string;
constructor(name: string, value: number) {
this.name = name;
this.value = value;
}
getValue():number{
return this.value + 100;
}
getName(): string {
return `name is: ${this.name} value is ${this.getValue()}`;
}
}
export class TestDataList {
public datas: Array<Object>
constructor(datas: Array<Object>) {
this.datas = datas;
}
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
如何处理json 涉及多次嵌套结构的动态数据
1756浏览 • 1回复 待解决
HarmonyOS 数据结构多级嵌套如何局部刷新
45浏览 • 1回复 待解决
HarmonyOS 嵌套数组元素的UI刷新方案
411浏览 • 1回复 待解决
数据结构嵌套二维数组的情况下,如何监测数组数据的变化触发UI的刷新?
374浏览 • 1回复 待解决
HarmonyOS 嵌套一层的数组无法监听相同数据增加,但是无嵌套的数组可以监听相同数据增加
55浏览 • 1回复 待解决
HarmonyOS @State修饰@observed装饰的对象, 对象里的数组改变, 不会触发ui刷新
32浏览 • 1回复 待解决
#鸿蒙学习大百科#为什么应减少使用嵌套export *的方式?
238浏览 • 1回复 待解决
HarmonyOS 嵌套组件能否支持state传递或provider、consumer?
308浏览 • 1回复 待解决
@State 修饰的变量值改变,界面不刷新
1600浏览 • 1回复 待解决
HarmonyOS HashMap中放入数组,数组数据发生改变时如增加或者删除元素,如何触发UI刷新
64浏览 • 1回复 待解决
HarmonyOS @State修饰的class变量没有嵌套的值无法监听
294浏览 • 1回复 待解决
为什么@ObjectLink装饰的变量不能被赋值而@Prop装饰的变量可以赋值?
454浏览 • 1回复 待解决
HarmonyOS 对象A数组,对象A中又嵌套一个对象B数组,修改B中的属性UI,不刷新
523浏览 • 1回复 待解决
@Observed中的数组变化无法触发界面刷新
1100浏览 • 1回复 待解决
scroll中嵌套一个或多个grid,如何实现嵌套滚动?
2266浏览 • 1回复 待解决
数组嵌套数组场景的懒加载实现
645浏览 • 1回复 待解决
PolarDB 的进程结构是什么?
2590浏览 • 1回复 待解决
Mysql的索引是什么结构?
2524浏览 • 1回复 待解决
PolarDB 的进程结构中Backend process是什么?
2451浏览 • 1回复 待解决
UI界面中用@state绑定的变量,在逻辑代码中class中做了修改,怎么在UI界面察觉到这个@state变量发生了变化
1765浏览 • 1回复 待解决
WantAgentInfo中的wants为什么是数组
1845浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在HarmonyOS NEXT中,如何使用@State装饰器确保变量变化能够触发UI刷新?
130浏览 • 0回复 待解决
@State观察自定义ViewModel中数组变量变化观察的问题
294浏览 • 1回复 待解决
使用@ObservedV2装饰器的class,给子组件@Prop装饰的数组传值时,数组变动了,但数组元素的值未拷贝过去
282浏览 • 1回复 待解决
PolarDB 的数据块的结构是什么?
2876浏览 • 1回复 待解决
以上代码引起不刷新的问题主要是由于嵌套结构导致的:TestDataList这个类中嵌套存放了一个数组,数组中存放了一个类结构TestData。
由于@State装饰的变量,只能监听到对象本身的地址以及第一层属性的地址变化,也就是this.dataList地址的变化或者this.dataList.datas的地址变化,例如如下操作:
由于this.dataList.datas.push、pop的操作不会触发dataList以及datas的地址变化,也就不会触发UI的刷新。
解决方案是利用ArkUI提供的@Observed、@ObjectLink来对嵌套的结构建立UI与数据的联系,对于数组结构需要通过@Observed包装一层,使其成为可监听结构;
具体方案如下:
1. 将Array变为ObseredArray,使用Observed监听。
2. 替换原来的Array为ObseredArray。
3.视图中列表部分创建一个新的组件ListDataView,用ObjectLink接受数据。
4. 原来的Index引入ListDataView使用,并传递参数。