HarmonyOS 解析Json数据添加到数据源不刷新UI

// MainPage.ets
import { CommonDataSource } from './CommonDataSource';
import { ArticleCard } from './ArticleCard';

@Entry
@Component
struct DishSearchPage {
    @State articleList: Array<Article> = [];
    private res: string = `{"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) => {
            // 使用构造函数创建新的 Article 实例
            let newArticle = new Article(v.id, v.title, v.brief, v.isLiked, v.likesCount);
            this.articleList.push(newArticle);
        });
    }

    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);
    }
}

// ArticleCard.ets
@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;
    }
}