HarmonyOS鸿蒙Next中嵌套表单list，list内部item不同类型，递归渲染数据后，ui不更新

HarmonyOS鸿蒙Next中嵌套表单list，list内部item不同类型，递归渲染数据后，ui不更新

之所以用联合类型，是因为表单list的item每一项有不同属性，item内部可能嵌套list，这样就用到了递归渲染组件。修改的时候，list的值都变了的，但是UI就是不更新，何解？

渲染入口：

// 递归表单项
DynamicFormItem({
  formList: this.formOriginList,
  originList: this.formOriginList,
  clientSubmitter: this.clientSubmitter,
  showRelateFlagList:this.showRelateFlagList,
  setDetailItem: this.setDetailItems,
  onDetailItemChange: (val) => {
    this.setDetailItems = val
  },
  onUpdateItemData: (index:number, val:ListComponentItem) => {
    this.recursiveAssignmentToFormItem(val, this.formOriginList)
    this.approvalMap()
    this.listenFormItem(index, val)
  }
})
.visibility(this.formOriginList.length?Visibility.Visible:Visibility.None)
// 审批流程节点图
ProcessMap({processNodes:this.processNodes, originProcess:this.launchData.process})
.visibility(this.formOriginList.length?Visibility.Visible:Visibility.None)
}.padding({bottom: 200})

接参：

@Component
export struct DynamicFormItem {
  @Prop formList:ListComponentItem[]
  @Link originList:ListComponentItem[]
  @Prop clientSubmitter:ContactType = {
    id: "",
    name: ""
  }
  @Prop setDetailItem: Record<string,DetailItemInfo[]>= {}
  @Link showRelateFlagList:string[]
  @Prop templateList:ListComponentItem[] = []
  @StorageLink('selectConsumableData') selectConsumableData:ConsumablesAssetItem[] = []
  @StorageLink('selectFlowRelatedData') selectFlowRelatedData: FlowRelatedItem[] = []
  @StorageLink('typeOfLeave') typeOfLeave:TypeOfLeave = {
    type: "",
    numberId: "",
    date: ""
  }
}

联合类型：

type ListComponentItem = |
  MInput|
  MCheckbox|
  MTextarea|
  MDate|
  MDateRange|
  MRadio|
  MCaption|
  MAmount|
  MNumber|
  MDepartment|
  MGroupTitle|
  MSwiftNumber|
  MContact|
  MAttachment|
  MUploadImg|
  MAssets|
  MMaterial|
  MCFormula|
  MAssetCategory|
  MLocation|
  MAssociatedProcess|
  MDetails|
  MTable|
  MDetailsInner|
  ProcessKitType|
  AssetKitType|
  ContractKitType

更多关于HarmonyOS鸿蒙Next中嵌套表单list，list内部item不同类型，递归渲染数据后，ui不更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

使用V2的话参考

@ObservedV2的使用

参考代码（部分）：

@ObservedV2
export class HomePageViewModel {
  readonly commonWebChecksNetworkHandle: CommonWebChecksNetworkHandle = new CommonWebChecksNetworkHandle()
  // 响应式状态
  @Trace showState: HomePageShowState = HomePageShowState.SkScreen //初始状态默认是SkScreen
  @Trace privacyAuth: boolean = SysPrivacyUtil.queryPrivacyAgree()

V1对象不深的话可以考虑用@Observed和@Track来使用

还有一种取巧的方法是：将那整个对象都重新赋值，这样会有性能问题

更多关于HarmonyOS鸿蒙Next中嵌套表单list，list内部item不同类型，递归渲染数据后，ui不更新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


// 使用@ObservedV2修饰嵌套类

@ObservedV2

class NestedItem {

subList: SubItem[] = [];

// … }

// 在组件中通过@ObjectLink绑定

@Component

struct ChildComponent {

@ObjectLink item: NestedItem; // 79 }

请检查一下Foreach的键值生成规则，规则使用不对，会导致无法渲染，如果不是键值问题，可以看一下嵌套对象的更新问题，v1的嵌套对象更新比较复杂，可以看看v2的装饰器

cke_445.png

建议采用V2版本，V1很复杂，需要做很多的这种办法，V1和V2可以混合使用

在HarmonyOS鸿蒙Next中，使用@State或@Link装饰器管理嵌套表单list数据。对于不同类型item，确保每个item有唯一标识符key。使用ForEach渲染时，必须提供稳定的key参数。若UI不更新，检查数据源是否被正确标记为响应式，并确认ForEach的itemGenerator函数正确处理了不同类型item。对于递归渲染，确保每个层级的数据变化都能触发重新渲染。

在HarmonyOS Next中遇到嵌套表单list递归渲染时UI不更新的问题，通常是由于数据状态管理或组件渲染机制导致的。以下是关键点分析：

  1. 状态管理问题：
  • 使用@Link装饰器绑定的originList需要确保父组件和子组件引用的是同一个状态对象
  • 对于嵌套数据更新，建议使用深拷贝或Immer等不可变数据更新方式
  1. 递归渲染优化：
  • 确保每个递归层级的组件都有唯一的key属性
  • 对于联合类型，建议使用类型守卫(type guard)来确保类型安全
  1. 解决方案：
// 在更新方法中强制触发UI更新
onUpdateItemData(index: number, val: ListComponentItem) {
  this.formOriginList = [...this.formOriginList]; // 创建新数组引用
  this.recursiveAssignmentToFormItem(val, this.formOriginList);
  this.approvalMap();
  this.listenFormItem(index, val);
}
  1. 检查点：
  • 确认@Prop和@Link装饰器使用正确
  • 检查递归组件是否正确地触发了状态更新
  • 使用开发者工具的"组件树"检查数据流

如果问题仍未解决，建议提供更完整的递归组件实现代码以便进一步分析。

回到顶部