HarmonyOS鸿蒙Next中二维数组嵌套对象修改属性无法刷新UI

HarmonyOS鸿蒙Next中二维数组嵌套对象修改属性无法刷新UI 外层数组包含对象 对象包含数组对象 通过修改最里面的对象数据，无法刷新UI

@Observed

export class SZHInfo {
  isCheck: boolean = false;
}

@Observed
export class NewsItem {
  title: string = '';
  szhInfoList: SZHInfo[]
}

// 三级页面
@export struct SZHInfoCard {
  @ObjectLink info: SZHInfo

  build() {
    if (this.info.isCheck) {
      Text('isCheck')
    } else {
      Text('unCheck')
    }
  }
}

// 二级页面
@Component
export struct SZHNewsItemComponent {
  @ObjectLink item: NewsItem

  build() {
    ForEach(this.item.szhInfoList, (item: SZHInfo) => {
      ListItem() {
        SZHInfoCard({
          item: item
        })
      }
    })
  }
}

// 1级列表
export struct ListPage {
  @State list: NewsItem[] = []

  build() {
    ForEach(this.list, (item: SZHNewsItem) => {
      ListItem() {
        SZHNewsItemComponent({
          newsItem: item
        })
      }
    })
  }

  function updateitem() {
    // 通过最外层修改数据，刷新点赞状态
    this.list[0].szhInfoList[0].isCheck = true
  }
}

更多关于HarmonyOS鸿蒙Next中二维数组嵌套对象修改属性无法刷新UI的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以参考下下面的demo:

@Observed
export class SZHInfo {
  flag: boolean

  constructor(flag: boolean) {
    this.flag = flag
  }
}

@Observed
export class listData {
  title: string
  szhInfoList: SZHInfo[]

  constructor(title: string, szhInfoList: SZHInfo[]) {
    this.title = title
    this.szhInfoList = szhInfoList
  }
}

@Component
struct Component1 {
  @ObjectLink listData: listData;
  
  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.listData.szhInfoList, (item: SZHInfo) => {
          ListItem() {
            Component2({ listData1: item })
          }
        })
      }
    }
  }
}

@Component
struct Component2 {
  @ObjectLink listData1: SZHInfo;
  @State index: number = 0
  
  build() {
    Column() {
      if (this.listData1.flag) {
        Text('isCheck')
      } else {
        Text('unCheck')
      }
    }
  }
}

@Entry
@Component
struct Page24101001 {
  @State list: listData[] = [new listData('1111', [new SZHInfo(false), new SZHInfo(true), new SZHInfo(true)])]
  
  build() {
    Column() {
      Button('点击修改').onClick(() => {
        this.list[0].szhInfoList[0].flag = !this.list[0].szhInfoList[0].flag
      })
      
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.list, (item: listData) => {
          ListItem() {
            Component1({ listData: item })
          }
        })
      }
    }
  }
}

更多关于HarmonyOS鸿蒙Next中二维数组嵌套对象修改属性无法刷新UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，如果二维数组嵌套对象修改属性后无法刷新UI，可能是由于数据绑定机制未正确触发更新。鸿蒙的UI刷新依赖于数据的变化通知机制，即当数据发生变化时，系统需要感知并触发UI的重新渲染。

在鸿蒙中，数据绑定通常通过@State、@Prop、@Link等装饰器来实现。如果二维数组嵌套对象中的属性发生变化，但UI未刷新，可能是因为嵌套对象的变化未被正确检测到。鸿蒙的数据绑定机制对于嵌套对象的深层属性变化可能不会自动触发更新，特别是当直接修改对象内部的属性时。

要解决这个问题，可以通过手动触发数据更新的方式，例如使用this.setData()或重新赋值整个对象，强制通知系统数据发生了变化。这样可以确保UI能够正确响应数据的变化并重新渲染。

此外，确保在修改数据时，遵循鸿蒙的数据更新规范，避免直接修改对象的内部属性，而是通过创建新对象或使用深拷贝的方式来更新数据，这样可以更好地触发数据绑定的更新机制。

在HarmonyOS鸿蒙Next中，如果二维数组嵌套对象的属性修改后无法刷新UI，可能是由于数据绑定机制未正确触发。确保使用了@State或@Observed装饰器来标记数组或对象，以便在属性变化时自动更新UI。此外，使用this.$set或this.$forceUpdate方法手动触发视图更新。检查代码逻辑，确保修改操作在数据绑定范围内。

回到顶部