HarmonyOS 鸿蒙Next 状态管理 V1 嵌套问题

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 状态管理 V1 嵌套问题

@Observed
export class TestBeanList {
  public attribute1: string = "";
  public attribute2: boolean = false;
  public testBeanList: ArrayList<TestBean> = new ArrayList()
}


@Observed
export class TestBean {
  public testBeanAttribute1: string = "";
  public testBeanAttribute2: boolean = false;
  public testBeanAttribute3: boolean = false;
  public testChildBeanList: ArrayList<TestChildBean> = new ArrayList()
}

@Observed
export class TestChildBean {
  public testBeanAttribute1: string = "";
  public testBeanAttribute2: boolean = false;
  public testBeanAttribute3: boolean = false;
}

现在如果有一个视图的显示是和 TestChildBean.testBeanAttribute2 的属性相关的 按照上面的写法无法进行数据与视图的双向绑定, 有大佬知道什么合适的方案吗？


更多关于HarmonyOS 鸿蒙Next 状态管理 V1 嵌套问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

参考demo：

import { ArrayList } from '[@kit](/user/kit).ArkTS';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Ir240829200234069 {
 [@State](/user/State) message: string = 'Hello World';
 // [@Provide](/user/Provide)("TestModel") mTestModel: TestModel = TestModel.getInstance()
 [@State](/user/State)[@Watch](/user/Watch)("onChange") mTestModel: TestModel = TestModel.getInstance()
 [@State](/user/State) isFinish: boolean = false

 aboutToAppear(): void {
   this.isFinish = false
   this.mTestModel.initData()
   this.isFinish = true
 }

 onChange(){
   console.log(':::onChange')
 }

 build() {


   Column() {
     if (this.isFinish) {
       Text01({testBeanList:this.mTestModel.testBeanList})

       // Grid() {
       //   ForEach(this.mTestModel.testBeanList, (item: TestBean) => {
       //     GridItem(){
       //       Column()
       //         .margin({left: 10})
       //         .width(40)
       //         .height(40)
       //         .backgroundColor(item.isSelect ? Color.Red : Color.Black)
       //         .onClick(() => {
       //           this.mTestModel.testBeanList.forEach((testBean) => {
       //             if (testBean.index == item.index) {
       //               testBean.isSelect = true
       //             } else {
       //               testBean.isSelect = false
       //             }
       //           })
       //         })
       //     }
       //   })
       // }
       // .scrollBar(BarState.Off)
       // .rowsTemplate('1fr')
     }
   }.width("100%")
   .height("100%")

 }
}

[@Component](/user/Component)
struct Text01{
 [@ObjectLink](/user/ObjectLink) testBeanList:TestBeanList

 build() {
   Grid() {
     ForEach(this.testBeanList, (item: TestBean) => {
       GridItem(){
         Text02({testBean:item})
       }.onClick(() => {
         this.testBeanList.forEach((testBean) => {
           if (testBean.index == item.index) {
             testBean.isSelect = true
           } else {
             testBean.isSelect = false
           }
         })
       })
     })
   }
   .scrollBar(BarState.Off)
   .rowsTemplate('1fr')
 }
}

[@Component](/user/Component)
struct Text02{
 [@ObjectLink](/user/ObjectLink) testBean:TestBean

 build() {
   Grid() {
     // ForEach(this.testBeanList, (item: TestBean) => {
       GridItem(){
         Column()
           .margin({left: 10})
           .width(40)
           .height(40)
           .backgroundColor(this.testBean.isSelect ? Color.Red : Color.Black)

       }
     // })
   }
   .scrollBar(BarState.Off)
   .rowsTemplate('1fr')
 }
}


// TestModel


[@Observed](/user/Observed)
export class TestModel {
 private static instance: TestModel;

 public static getInstance(): TestModel {
   if (!TestModel.instance) {
     TestModel.instance = new TestModel();
   }
   return TestModel.instance;
 }


 public testBeanList: TestBean[] = []

 public initData() {
   this.testBeanList.push(new TestBean("1",true))
   this.testBeanList.push(new TestBean("2"))
   this.testBeanList.push(new TestBean("3"))
   this.testBeanList.push(new TestBean("4"))
   this.testBeanList.push(new TestBean("5"))
   this.testBeanList.push(new TestBean("6"))
   this.testBeanList.push(new TestBean("7"))
   this.testBeanList.push(new TestBean("8"))
   this.testBeanList.push(new TestBean("9"))
   this.testBeanList.push(new TestBean("10"))
   this.testBeanList.push(new TestBean("11"))
   this.testBeanList.push(new TestBean("712"))
 }
}

// TestBean 数据对象
[@Observed](/user/Observed)
export class TestBean {
 public isSelect = false
 public index: string

 constructor(index: string, isSelect: boolean = false) {
   this.index = index;
   this.isSelect = isSelect;
 }
}

[@Observed](/user/Observed)
class TestBeanList extends Array<TestBean>{}

更多关于HarmonyOS 鸿蒙Next 状态管理 V1 嵌套问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next 状态管理 V1 嵌套问题，以下提供直接解答：

在HarmonyOS的状态管理V1中，嵌套状态管理通常涉及多个状态容器（State Container）的层次结构。每个状态容器维护其自身的状态，并可能嵌套其他状态容器。嵌套状态下，子状态容器的状态更新不会直接影响父状态容器，但父状态容器的状态变化可能会影响其子容器的渲染或行为。

若遇到嵌套问题，首先检查各状态容器的依赖关系和更新逻辑。确保子状态容器的状态更新通过合适的机制（如事件、回调等）通知到父状态容器，同时父状态容器的状态变化能够正确触发子容器的重新渲染或逻辑更新。

此外，注意嵌套状态下的生命周期管理。确保状态容器在嵌套结构中正确创建、更新和销毁，避免内存泄漏或状态不一致的问题。

若嵌套问题涉及复杂的业务逻辑或状态依赖，考虑使用更高级的状态管理方案，如全局状态管理或响应式状态管理，以提供更灵活和高效的状态更新机制。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部