鸿蒙Next中二维数组使用@state时，如何实现第二维数组变化触发UI刷新

在鸿蒙Next开发中，使用@state修饰二维数组时，发现修改第二维数组的元素后UI不会自动刷新。例如：

[@state](/user/state) arr: number[][] = [[1,2],[3,4]];  
// 修改第二维数据  
this.arr[0][1] = 5; // UI未更新

尝试过this.arr = [...this.arr]强制刷新，但效率较低。请问是否有更优雅的实现方式，能让第二维数组变化直接触发UI更新？

2 回复

鸿蒙Next中，用@State声明二维数组时，如果只改第二维，UI不会自动刷新。解决方法是：把第二维数组也包装成@State对象，或者直接替换整个第一维数组（比如用展开操作符[…arr]）。简单说：要么让第二维也“有状态”，要么假装整个数组都是新的！

更多关于鸿蒙Next中二维数组使用@state时，如何实现第二维数组变化触发UI刷新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（ArkTS）中使用[@State](/user/State)装饰二维数组时，需要确保整个数组引用或至少第一维数组发生变化才能触发UI刷新。如果仅修改第二维数组内容，UI不会自动更新。以下是实现方法：

解决方案

  1. 重新赋值整个数组（推荐）：

    [@State](/user/State) array: number[][] = [[1, 2], [3, 4]];

// 修改第二维后重新赋值
updateSecondDimension(row: number, col: number, value: number) {
  this.array[row][col] = value;
  this.array = [...this.array]; // 创建新数组引用触发更新
}

  2. 使用嵌套对象： 将第二维改为[@State](/user/State)对象：

    class RowData {
  [@State](/user/State) items: number[] = [];
}

[@State](/user/State) table: RowData[] = [new RowData(), new RowData()];

// 直接修改第二维即可触发更新
updateItem(row: number, col: number, value: number) {
  this.table[row].items[col] = value;
}

说明

  • 方法1通过展开运算符创建新数组，确保引用变化
  • 方法2利用嵌套的[@State](/user/State)实现细粒度更新
  • 二维数组需要保持不可变更新模式

推荐使用方法1，代码更简洁且符合数据流规范。

回到顶部