@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 涉及多次嵌套结构的动态数据
1702浏览 • 1回复 待解决
HarmonyOS 嵌套数组元素的UI刷新方案
336浏览 • 1回复 待解决
数据结构嵌套二维数组的情况下,如何监测数组数据的变化触发UI的刷新?
308浏览 • 1回复 待解决
#鸿蒙学习大百科#为什么应减少使用嵌套export *的方式?
162浏览 • 1回复 待解决
HarmonyOS 嵌套组件能否支持state传递或provider、consumer?
240浏览 • 1回复 待解决
@State 修饰的变量值改变,界面不刷新
1452浏览 • 1回复 待解决
HarmonyOS @State修饰的class变量没有嵌套的值无法监听
228浏览 • 1回复 待解决
scroll中嵌套一个或多个grid,如何实现嵌套滚动?
2098浏览 • 1回复 待解决
HarmonyOS 对象A数组,对象A中又嵌套一个对象B数组,修改B中的属性UI,不刷新
432浏览 • 1回复 待解决
数组嵌套数组场景的懒加载实现
597浏览 • 1回复 待解决
@Observed中的数组变化无法触发界面刷新
1019浏览 • 1回复 待解决
为什么@ObjectLink装饰的变量不能被赋值而@Prop装饰的变量可以赋值?
379浏览 • 1回复 待解决
UI界面中用@state绑定的变量,在逻辑代码中class中做了修改,怎么在UI界面察觉到这个@state变量发生了变化
1699浏览 • 1回复 待解决
PolarDB 的进程结构中Backend process是什么?
2410浏览 • 1回复 待解决
PolarDB 的进程结构是什么?
2539浏览 • 1回复 待解决
Mysql的索引是什么结构?
2468浏览 • 1回复 待解决
@State观察自定义ViewModel中数组变量变化观察的问题
229浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在HarmonyOS NEXT中,如何使用@State装饰器确保变量变化能够触发UI刷新?
44浏览 • 0回复 待解决
使用@ObservedV2装饰器的class,给子组件@Prop装饰的数组传值时,数组变动了,但数组元素的值未拷贝过去
191浏览 • 1回复 待解决
HarmonyOS 多层嵌套布局是否会增加性能开销
365浏览 • 1回复 待解决
WantAgentInfo中的wants为什么是数组
1787浏览 • 1回复 待解决
使用@State修饰的数组对象,改变其中的某个对象的变量,自定义组件中的UI没有跟着刷新
738浏览 • 1回复 待解决
使用LazyForEach嵌套LazyForEach(或ForEach)显示异常。
754浏览 • 1回复 待解决
HarmonyOS @State装饰的变量需要设置为接口返回的数据时怎么设置初始值?
227浏览 • 1回复 待解决
HarmonyOS 为什么@Link的属性变更不会触发UI刷新?
299浏览 • 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使用,并传递参数。