鸿蒙@State数据响应式问题,复杂数据类型的深层嵌套无法触发视图更新,怎么办?

鸿蒙数据响应式更新视图的问题:
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'  //可以更改
        })

相关推荐

  1. 鸿蒙开发已解决-ArkTS@State 数组无法触发重绘

    2023-12-22 13:56:04       59 阅读
  2. Vuewatch功能:实现响应数据更新

    2023-12-22 13:56:04       64 阅读
  3. 【Vue3】reactive对象类型响应数据

    2023-12-22 13:56:04       23 阅读
  4. 【Vue3】ref基本类型响应数据

    2023-12-22 13:56:04       40 阅读
  5. 【Vue3】ref对象类型响应数据

    2023-12-22 13:56:04       39 阅读
  6. [Vue3] reactive数据改变,视图更新问题

    2023-12-22 13:56:04       47 阅读
  7. vue3 reactive包裹数组无法页面无法响应

    2023-12-22 13:56:04       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-22 13:56:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-22 13:56:04       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-22 13:56:04       82 阅读
  4. Python语言-面向对象

    2023-12-22 13:56:04       91 阅读

热门阅读

  1. 创酷rs2022车机安装app

    2023-12-22 13:56:04       268 阅读
  2. 用过都说好用的API接口汇总,含免费次数

    2023-12-22 13:56:04       64 阅读
  3. P2437 蜜蜂路线

    2023-12-22 13:56:04       61 阅读
  4. Python调用js,Python执行js,pyexecjs2使用方法

    2023-12-22 13:56:04       61 阅读
  5. 用radis扩展websockets服务

    2023-12-22 13:56:04       62 阅读
  6. Redis的缓存持久化以及缓存淘汰策略

    2023-12-22 13:56:04       68 阅读