HarmonyOS 接口返回的JSON串转为class，接口返回JSON转class这种如何处理？

接口返回的JSON串转为class，此class和其属性被@ObservedV2与@Trace装饰，但对于嵌套对象的变化无效。

接口返回JSON数据转为class，例如返回的是：

{  
 "father":{  
    "name":"我是爸爸",  
    "son": {  
       "age":12  
     }  
  },  
}1.
2.
3.
4.
5.
6.
7.
8.

这种嵌套对象数据，当业务中直接改变fater.name 或者fater.son.age的时候这两个绑定的UI并没有发生变化，但是如果我自定义的数据是这种嵌套的且由@ObservedV2与@Trace装饰，改变fater.name 或者fater.son.age的时候这两个绑定的UI是有发生变化的，针对这种接口返回JSON转class这种如何处理？

HarmonyOS

superinsect

2024-10-22 09:58:11

864浏览

已于2024-10-22 09:59:30修改

回答 1

按赞同

按时间

put_get

通过JSON.parse得到的对象并不是通过User构造出的实例，其数据变化无法被观测到，所以不能实现ui刷新

可以通过引入三方库 reflect-metadata 和 class-transformer，参考如下demo实现，observedv2同理

// test.ts :

export let jsonString:Record<string, ESObject> = {  
  "data" : [  
    {  
      "number" :1,  
      "age": 20,  
      "testA": {  
        "str" : "123"  
      }  
    },  
    {  
      "number" :2,  
      "age": 21,  
      "testA": {  
        "str" : "456"  
      }  
    }  
  ]  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

// Index.ets

import { Type, plainToClass } from 'class-transformer'  
import 'reflect-metadata'  
import { jsonString } from './test'  
import { TestA, Person, ViewA} from './ViewA';  
  
class ResponseObj {  
  @Type (() => Person)  
  data: Person[] = [];  
}  
  
@Entry  
@Component  
struct Index {  
  @State list: Person[] = [];  
  @State message: string = 'Click me';  
  
  build() {  
    Row() {  
      Column() {  
        Text(this.message).fontSize(40).onClick(() => {  
          let responseObj : ResponseObj = plainToClass(ResponseObj, jsonString);  
          console.log(` ${responseObj.data[0] instanceof Person}`)  
          this.list = this.list.concat(responseObj.data);  
        })  
  
        ForEach(this.list, (item : Person, index: number) => {  
          ViewA({index:index, testA: item.testA})  
        })  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

// ViewA.ets

import { Type } from 'class-transformer'  
  
@Observed  
export class TestA {  
  public str : string  
  
  constructor(str: string) {  
    this.str = str;  
  }  
}  
  
export class Person {  
  name: string = ''  
  age: number = 1  
  
  @Type(()=>TestA)  
  testA: TestA = new TestA('')  
}  
  
@Component  
export struct ViewA {  
  @ObjectLink testA: TestA  
  index: number = -1;  
  
  build() {  
    Row(){  
      Button(`View A ${this.testA.str}`).onClick(() =>{  
        this.index += 1;  
        this.testA.str = `${this.index} : Test A String`  
      })  
    }.margin({top : 10 })  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

2024-10-22 17:56:53

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 接口返回的JSON串转为class，接口返回JSON转class这种如何处理？

订阅鸿蒙技术特刊，精选内容抢先看