HarmonyOS 状态变量不刷新问题

下面这段代码在点击每个Item删除数组元素时，问什么没刷新到UI上。

//状态变量问题  
class Article {  
  id: string;  
  title: string;  
  brief: string;  
  constructor(id: string, title: string, brief: string) {  
    this.id = id;  
    this.title = title;  
    this.brief = brief;  
  }  
}  
class Arrtest{  
  articleList: Array<Article> = [  
    new Article('001', '第1篇文章', '文章简介内容'),  
    new Article('002', '第2篇文章', '文章简介内容'),  
    new Article('003', '第3篇文章', '文章简介内容'),  
    new Article('004', '第4篇文章', '文章简介内容'),  
    new Article('005', '第5篇文章', '文章简介内容'),  
    new Article('006', '第6篇文章', '文章简介内容')  
  ]  
}  
@Entry  
@Component  
struct ArticleListView {  
  @State isListReachEnd: boolean = false;  
  @State arrtest: Arrtest = new Arrtest()  
  
  build() {  
    Column({ space: 5 }) {  
      Flex() {  
        ForEach(this.arrtest.articleList, (item: Article, index: number) => {  
          ListItem() {  
            this.articleCard(index)  
          }  
        }, (item: Article) => item.id)  
      }  
      .padding(20)  
    }  
    .width('100%')  
    .height('100%')  
    .backgroundColor(0xF1F3F5)  
  }  
  
  @Builder  
  articleCard(index: number) {  
    Row() {  
      Column() {  
        Text('test')  
          .fontSize(20)  
          .margin({ bottom: 8 })  
      }  
      .alignItems(HorizontalAlign.Start)  
      .width('80%')  
      .height('100%')  
    }  
    .padding(20)  
    .borderRadius(12)  
    .backgroundColor('#FFECECEC')  
    .height(120)  
    .width('100%')  
    .justifyContent(FlexAlign.SpaceBetween)  
    .onClick(() => {  
      this.arrtest.articleList?.splice(index, 1)  
    })  
}  
}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.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.

HarmonyOS

Heiang

2024-09-27 13:16:10

浏览

回答 2

按赞同

按时间

鱼弦CTO

在 HarmonyOS 中，如果状态变量的更改没有正确地刷新 UI，很可能是因为状态管理或者数据绑定的问题。你的代码中，使用了 @State 装饰器来声明状态变量，但操作数组的方法可能没能通知框架当前状态发生了变化。

## 问题分析

### 1. 数组操作直接操作数组（如 splice）不会触发对整个对象属性的变动通知。框架可能无法检测到数组内容的变化，从而不重新渲染组件。

### 2. 确保状态更新需要确保每次更改数组数据时，能够通知框架状态已经改变。

## 改进方法

### 使用 @State 和 @Link

@State
@Link

### 示例代码

以下是如何改进你的代码，以确保在删除数组元素时能够正确地刷新 UI：

// 状态变量问题
class Article {  
  id: string;  
  title: string;  
  brief: string;  
  constructor(id: string, title: string, brief: string) {  
    this.id = id;  
    this.title = title;  
    this.brief = brief;  
  }  
}  

class Arrtest{  
  articleList: Array<Article> = [  
    new Article('001', '第1篇文章', '文章简介内容'),  
    new Article('002', '第2篇文章', '文章简介内容'),  
    new Article('003', '第3篇文章', '文章简介内容'),  
    new Article('004', '第4篇文章', '文章简介内容'),  
    new Article('005', '第5篇文章', '文章简介内容'),  
    new Article('006', '第6篇文章', '文章简介内容')  
  ]  
}  

@Entry  
@Component  
struct ArticleListView {  
  @State isListReachEnd: boolean = false;  
  @State arrtest: Arrtest = new Arrtest()  
  
  build() {  
    Column({ space: 5 }) {  
      Flex() {  
        ForEach(this.arrtest.articleList, (item: Article, index: number) => {  
          ListItem() {  
            this.articleCard(index)  
          }  
        }, (item: Article) => item.id)  
      }  
      .padding(20)  
    }  
    .width('100%')  
    .height('100%')  
    .backgroundColor(0xF1F3F5)  
  }  
  
  @Builder  
  articleCard(index: number) {  
    Row() {  
      Column() {  
        Text('test')  
          .fontSize(20)  
          .margin({ bottom: 8 })  
      }  
      .alignItems(HorizontalAlign.Start)  
      .width('80%')  
      .height('100%')  
    }  
    .padding(20)  
    .borderRadius(12)  
    .backgroundColor('#FFECECEC')  
    .height(120)  
    .width('100%')  
    .justifyContent(FlexAlign.SpaceBetween)  
    .onClick(() => {  
      this.handleItemClick(index);  
    })  
  }
  
  handleItemClick(index: number) {
    // 刷新数据
    let newArray = [...this.arrtest.articleList]; // 创建数组副本
    newArray.splice(index, 1); // 在副本上操作
    this.arrtest.articleList = newArray; // 重新赋值触发更新
  }
}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.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.

### 关键点解释：

创建数组副本:

使用 ES6 展开运算符... 创建一个数组的副本。
在副本上进行splice 操作，这样可以避免原数组的直接修改。

重新赋值:

将修改后的数组副本重新赋值给状态变量this.arrtest.articleList。
重新赋值操作会触发状态更新，并使得 UI 重新渲染。

通过这种方式，可以确保状态变量的更改能够被框架正确检测到，从而刷新 UI。如果有进一步的问题或特殊需求，请随时提问。

2024-09-28 16:11:40

put_get

可参考如下关键代码：

.onClick(() => {  
  this.arrtest.articleList?.splice(index, 1);  
  this.arrtest.articleList = this.arrtest.articleList.concat([]);  
})1.
2.
3.
4.

2024-09-27 17:34:25

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 状态变量不刷新问题

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