HarmonyOS 解析Json数据添加到数据源不刷新UI
@Entry
@Component
struct DishSearchPage {
@State articleList: Array<Article> = []
res = `{"code":0,"data":[{"id":"001","title":"第0篇文章","brief":"文章简介内容","isLiked":false,"likesCount":100},{"id":"002","title":"第1篇文章","brief":"文章简介内容","isLiked":false,"likesCount":100},{"id":"003","title":"第2篇文章","brief":"文章简介内容","isLiked":false,"likesCount":100},{"id":"004","title":"第4篇文章","brief":"文章简介内容","isLiked":false,"likesCount":100},{"id":"005","title":"第5篇文章","brief":"文章简介内容","isLiked":false,"likesCount":100},{"id":"006","title":"第6篇文章","brief":"文章简介内容","isLiked":false,"likesCount":100}]}`;
aboutToAppear(): void {
let articleRes: ArticleRes = JSON.parse(this.res)
articleRes?.data?.forEach((v) => {
// this.articleList.push(JSON.parse(JSON.stringify(v)))
this.articleList.push(JSON.parse(JSON.stringify(v)))
})
}
build() {
List() {
ForEach(this.articleList, (item: Article) => {
ListItem() {
ArticleCard({
article: item
})
.margin({ top: 20 })
}
}, (item: Article) => item.id)
}
.padding(20)
.scrollBar(BarState.Off)
.backgroundColor(0xF1F3F5)
}
}
@Component
struct ArticleCard {
@ObjectLink article: Article;
handleLiked() {
this.article.isLiked = !this.article.isLiked;
this.article.likesCount = this.article.isLiked ? this.article.likesCount + 1 : this.article.likesCount - 1;
}
build() {
Row() {
Image($r('app.media.icon'))
.width(80)
.height(80)
.margin({ right: 20 })
Column() {
Text(this.article.title)
.fontSize(20)
.margin({ bottom: 8 })
Text(this.article.brief)
.fontSize(16)
.fontColor(Color.Gray)
.margin({ bottom: 8 })
Row() {
Text(this.article.likesCount.toString())
.fontSize(16)
}
.justifyContent(FlexAlign.Center)
}
.alignItems(HorizontalAlign.Start)
.width('80%')
.height('100%')
}
.padding(20)
.borderRadius(12)
.height(120)
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(this.article.isLiked ? Color.Blue : '#FFECECEC')
.onClick(() => this.handleLiked())
}
}
@Observed
class ArticleRes {
code: number = -1
data: Array<Article> = []
}
@Observed
class Article {
id: string;
title: string;
brief: string;
isLiked: boolean;
likesCount: number;
constructor(id: string, title: string, brief: string, isLiked: boolean, likesCount: number) {
this.id = id;
this.title = title;
this.brief = brief;
this.isLiked = isLiked;
this.likesCount = likesCount;
}
}
let articleRes: ArticleRes = JSON.parse(this.res)
articleRes?.data?.forEach((v) => this.articleList.push(v))
解析Json数据 然后添加到列表的List就不行。
[
new Article('001', '第0篇文章', '文章简介内容', false, 100),
new Article('002', '第1篇文章', '文章简介内容', false, 100)
].forEach((v) => {
this.articleList.push(v)
})
new的就可以 为什么呢?
场景就是这样的 接口返了一个类似ArticleRes的json数据 想问下要怎么操作才能让数据源数组项子属性变化 ui跟着变化呢?
这种要怎么刷新呢?
HarmonyOS
赞
收藏 0
回答 2
待解决
相关问题
HarmonyOS IDataSource数据源刷新后,列表为不刷新
375浏览 • 1回复 待解决
HarmonyOS TextPickerDialog数据源更新,UI不更新
24浏览 • 1回复 待解决
HarmonyOS LazyForEach修改数据源不刷新问题
633浏览 • 1回复 待解决
HarmonyOS 使用LazyForEach,数据源传不进来,UI不更新
29浏览 • 1回复 待解决
关于使用foreach&lazyforeach更改数据源界面不刷新的问题
1185浏览 • 2回复 待解决
HarmonyOS oh-package-lock.json5可以添加到.gitignore吗?
57浏览 • 1回复 待解决
HarmonyOS 卡片添加到负一屏
464浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
740浏览 • 1回复 待解决
HarmonyOS IDataSource支持数据源整体一次替换
667浏览 • 1回复 待解决
HarmonyOS picker选择器的数据源问题
4浏览 • 1回复 待解决
修改ForEach使用的数据对象,UI不刷新
1875浏览 • 1回复 待解决
如何解决使用foreach&lazyforeach循环渲染时,会出现更改数据源时,界面不刷新的问题
919浏览 • 1回复 待解决
异步回调更新数据源,无法触发列表渲染
2811浏览 • 2回复 待解决
鸿蒙卡片添加到桌面会触发哪个方法呢?
6357浏览 • 1回复 待解决
HarmonyOS Swiper使用LazyForEach,在数据源更新后,页面闪烁
4浏览 • 1回复 待解决
HarmonyOS Photo Picker组件数据源赋值问题咨询
26浏览 • 1回复 待解决
HarmonyOS Tabs展示完毕后,修改数据源后,Tabs内容无法刷新,请问如何处理
54浏览 • 1回复 待解决
使用foreach&lazyforeach循环渲染时,会出现更改数据源时,界面不刷新的情况。如何解决
2420浏览 • 1回复 待解决
#鸿蒙通关秘籍##鸿蒙通关秘籍#如何为HarmonyOS NEXT的轮播图添加数据源?
117浏览 • 1回复 待解决
Foreach循环渲染,数据源改变时的重复渲染
1046浏览 • 1回复 待解决
HarmonyOS TextPicker多列选择器数据源的构造问题
1浏览 • 1回复 待解决
HarmonyOS Worker如何主动取消已添加到队列中的任务
62浏览 • 1回复 待解决
HarmonyOS LazyForEach无法检测数据源的变化进行重新渲染
29浏览 • 1回复 待解决
HarmonyOS使用@ObjectLink 数据不刷新
800浏览 • 2回复 待解决
在HarmonyOS的ArkUI中,
@State
和 @Observed
数据的变化会自动触发UI更新。但是你遇到的问题是,当从JSON解析并添加到数组后,UI没有及时刷新。这通常与对象的引用和响应式系统有关。### 原因分析
当你直接从JSON解析数据并添加到
@State
的数组中时,这些新对象可能没有被正确地观察到,因此无法触发UI更新。相比之下,通过 new
关键字创建的对象因为是在受控环境下生成的,所以能够被正确地观察到。## 解决方案
可以通过显式构造新的
Article
对象来确保这些对象被正确观察到。以下是优化后的代码示例:### 父组件代码
### 子组件代码
### 数据模型
### 总结
通过调用
Article
构造函数创建新的 Article
实例,可以确保这些实例被正确观察到,从而触发UI更新。当你直接从JSON解析并赋值时,由于这些对象没有通过 Observed
相关机制生成,可能不会触发UI更新。因此,使用显式构造的新对象可以解决这个问题。使用三方库 class-transformer:https://ohpm.openharmony.cn/#/cn/detail/class-transformer
Json转Class 就行了。