HarmonyOS鸿蒙Next中怎么处理List自定义子组件UI不跟随数据刷新的问题

【问题现象】

获取数据后，在List组件中使用ListItemGroup对数据进行分组展示，ListItem中是自定义的组件，自定义组件里声明变量添加了@ObjectLink，数据的自定义class也添加了@Observed。如图所示，点击删除后，通过日志观察到数据已经删除了，但是UI并没有刷新。

【背景知识】

• List组件支持分组列表。
• @Observed装饰器和@ObjectLink装饰器。

【定位思路】

经过分析，原因是第二个ForEach中的item.enterprise未被状态装饰器修饰，无法观察值的变化。

问题代码如下：

@Builder
listlayout() {
  List({ space:12,initialIndex:0 }) {
    ForEach(this.enterpriseInfosList, (item: TempEnterpriseInfos,index: number) => {
      ListItemGroup({ header:this.itemHead(item.state) }) {
        // item.enterprise未被状态装饰器修饰，无法观察值的变化
        ForEach(item.enterprise, (item: TempEnterprise,itemIndex: number) => {
          ListItem() {
            listItemLayout({
              item: item,
              pageState:this.pageState,
              enterpriseid:this.enterpriseid,
              selectClick:this.selectClick,
              deleteClick:this.deleteClick
            })
          }.swipeAction({
            end: {
              // index为该ListItem在List中的索引值。
              builder: () => {
                this.itemEnd(index, itemIndex)
              },
              actionAreaDistance:56,
            }
          })
        }, (item: TempEnterprise) =>JSON.stringify(item))
      }
    }, (item: TempEnterpriseInfos) =>JSON.stringify(item))
  }
  .width('100%')
  .layoutWeight(1)
  .multiSelectable(true)
  .backgroundColor($r('app.color._f5f5f5'))
  .padding({ left:12,right:12 })
}
[@Observed](/user/Observed)
exportclass TempEnterpriseInfos {
  state: string =''; // 状态
  enterprise: TempEnterpriseArray = [];

  constructor(state: string,enterprise: TempEnterpriseArray) {
    this.state= state;
    this.enterprise= enterprise;
  }
}
[@Observed](/user/Observed)
exportclass TempEnterpriseInfosArray extendsArray<TempEnterpriseInfos> {}
[@Observed](/user/Observed)
exportclass TempEnterprise {
  enterpriseid: string ='' // 企业id
  enterpriseName: string ='' // 企业名称
  private_checked: boolean =false; // 选中状态
}
[@Observed](/user/Observed)
export class TempEnterpriseArray extends Array<TempEnterprise> {}

【解决方案】

基于以上分析，需要再定义一个分组的自定义子组件，用@ObjectLink装饰器装饰数据源。

1. 父组件EnterpriseSwitchingPage

代码示例如下：

@Builder
listlayout() {
  List({ space: 12, initialIndex: 0 }) {
    ForEach(this.enterpriseInfosList, (item: TempEnterpriseInfos, index: number) => {
      MyListItemGroup({
        index: index,
        state: item.state,
        enterprise: item.enterprise,
        pageState: this.pageState,
        enterpriseid: this.enterpriseid,
        selectClick: this.selectClick,
        deleteClick: this.deleteClick,
        enterpriseInfosList: this.enterpriseInfosList
      })
    }, (item: TempEnterpriseInfos) => JSON.stringify(item))
  }
}

2. 子组件MyListItemGroup

代码示例如下：

@Component
struct MyListItemGroup {
  @Link pageState: number
  @Link enterpriseid: string
  @Link selectClick: boolean
  @Link deleteClick: boolean
  @Prop state: string
  @Prop index: number
  @State enterprise: TempEnterprise[] = []
  [@ObjectLink](/user/ObjectLink) enterpriseInfosList: TempEnterpriseInfosArray

  build() {
    ListItemGroup({ header:this.itemHead(this.state) }) {
      ForEach(this.enterprise, (item: TempEnterprise,itemIndex: number) => {
        ListItem() {
          listItemLayout({
            item: item,
            pageState:this.pageState,
            enterpriseid:this.enterpriseid,
            selectClick:this.selectClick,
            deleteClick:this.deleteClick
          })
        }.swipeAction({
          end: {
            // index为该ListItem在List中的索引值。
            builder: () => {
              this.itemEnd(this.index, itemIndex)
            },
            actionAreaDistance:56,
          }
        })
      }, (item: TempEnterprise) =>JSON.stringify(item))
    }
  }
}

效果如下：