鸿蒙数据响应式更新视图的问题:
1、基本数据类型和对象的第一层数据直接更改是可以做到视图更新的

 @State message: string = 'Hello World'     //  可以
 @State  obj={name:'',age:0}        //第一层属性直接改变  可以

2、对象的嵌套深层属性 直接改变 就不能触发视图更新了
class C {
  name: string = ''
  age: number = 0
  cc:{
    ccc:string
  }
}

@State obj:C = {
    name:'zhangsan',
    age:18,
    cc:{
      ccc:'123'
    }
  }
 Button('按钮').onClick((event: ClickEvent) => {
          this.obj.cc.ccc = '999'
        })  //不可以

解决办法:
1、使用展开运算符 但是next版本不支持这样的写法

this.obj.cc.ccc='666'
this.obj.cc = {...this.obj.cc,this.obj.cc.ccc}
2、可以在定义数据的时候使用接口定义
interface A {
  name:string
  age:number
}

interface B {
  b:string
  bb:A
}
export class AModel implements A {
  name: string = ''
  age: number = 0

  constructor(model: A) {
    this.name = model.name
    this.age = model.age
  }
}
export class BModel implements B {
  b: string = ''
  bb: A = new AModel({} as A)

  constructor(model: B) {
    this.b = model.b
    this.bb = model.bb
  }
}

//定义数据
 @State content:BModel = new BModel({
    b:'',
    bb:new AModel({
      name:'zhangsan',
      age:18
    })
  })
 Button('按钮').onClick((event: ClickEvent) => {
          this.content.bb.name = 'lisi'  //可以更改
        })
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐