@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 涉及多次嵌套结构的动态数据
816浏览 • 1回复 待解决
@State 修饰的变量值改变,界面不刷新
490浏览 • 1回复 待解决
scroll中嵌套一个或多个grid,如何实现嵌套滚动?
773浏览 • 0回复 待解决
数组嵌套数组场景的懒加载实现
283浏览 • 1回复 待解决
@Observed中的数组变化无法触发界面刷新
556浏览 • 1回复 待解决
UI界面中用@state绑定的变量,在逻辑代码中class中做了修改,怎么在UI界面察觉到这个@state变量发生了变化
793浏览 • 1回复 待解决
PolarDB 的进程结构是什么?
1441浏览 • 1回复 待解决
Mysql的索引是什么结构?
1480浏览 • 1回复 待解决
PolarDB 的进程结构中Backend process是什么?
1534浏览 • 1回复 待解决
使用LazyForEach嵌套LazyForEach(或ForEach)显示异常。
247浏览 • 1回复 待解决
使用@State修饰的数组对象,改变其中的某个对象的变量,自定义组件中的UI没有跟着刷新
101浏览 • 1回复 待解决
Swiper 组件嵌套图片刷新数据会闪烁
402浏览 • 1回复 待解决
WantAgentInfo中的wants为什么是数组
858浏览 • 1回复 待解决
物联网的层次结构中,网络层负责什么工作?
3762浏览 • 1回复 待解决
PolarDB 的数据块的结构是什么?
1703浏览 • 1回复 待解决
网络库里的Header是什么类型的结构
670浏览 • 1回复 待解决
@Provide的状态变量,是否可以观察多层嵌套的属性?
472浏览 • 1回复 待解决
TiDB + Flink 结构中数据分析应用有什么特点?
2541浏览 • 1回复 待解决
@StorageProp(key)/@StorageLink(key)装饰的变量为什么需要在本地进行初始化?
79浏览 • 1回复 待解决
PolarDB 数据库结构是什么?
1877浏览 • 1回复 待解决
使用EventHub通信接收到消息后更新@States装饰的变量布局刷新
471浏览 • 1回复 待解决
readonly修饰的数组无法获取数组元素
700浏览 • 1回复 待解决
在嵌套组件中Scroll不生效
992浏览 • 1回复 待解决
在Redis Cluster结构中对热Key进行复制的缺点是什么?
1896浏览 • 1回复 待解决
@State能不能装饰接口
467浏览 • 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使用,并传递参数。