HarmonyOS 鸿蒙Next 父组件与子组件中同步变量，在父组件中频繁更新数据在子组件中中间数据丢失

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

在HarmonyOS鸿蒙Next中，当父组件与子组件尝试同步变量时，如果父组件频繁更新数据，则可能导致子组件丢失中间的数据变化，最终只接收到最后一次更新。

具体场景如下：父组件中的变量被[@Watch](/user/Watch)修饰，并作为子组件的数据源，同时也在子组件中被[@Watch](/user/Watch)监听。当这个共享变量快速连续地发生变化时，父组件的回调函数能正常响应每一次的变化，但子组件却未能捕捉到所有的变更，仅接收到了最终的值。

示例代码展示了这一问题：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index5 {
  [@State](/user/State) [@Watch](/user/Watch)('onInnerDataChange') outData: number = -1;

  onInnerDataChange() {
    console.info('Index5', `get data value => ${this.outData}`);
  }

  build() {
    Column() {
      InnerComponent({ innerData: this.outData });
      Button('点击循环20个数据').onClick(() => {
        for (let i = 0; i < 20; i++) {
          this.outData = i;
        }
      });
    }.width('100%')
     .height('100%')
     .alignItems(HorizontalAlign.Center);
  }
}

[@Component](/user/Component)
struct InnerComponent {
  [@Prop](/user/Prop) [@Watch](/user/Watch)('onInnerDataChange') innerData: number = 0;

  onInnerDataChange() {
    console.info('InnerComponent', `get data value => ${this.innerData}`);
  }

  build() {}
}

更多关于HarmonyOS 鸿蒙Next 父组件与子组件中同步变量，在父组件中频繁更新数据在子组件中中间数据丢失的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可参考demo:

@Entry
@Component
struct Index5 {

  @State @Watch('onInnerDataChange') outData: number = -1

  @State nums:number[]=[]

  onInnerDataChange() {

    console.info('tag', `get data value => ${this.outData}`)

    //this.InnerComponent()

  }

  build() {

    Column() {

      InnerComponent({ innerData: this.outData })

      Button('点击循环20个数据').onClick(() => {

        for (let i = 0; i < 10; i++) {

          this.outData = i

          console.log("this.outData ==" + this.outData)

          this.nums.push(this.outData)

        }

      })

    }.width('100%')

    .height('100%')

    .alignItems(HorizontalAlign.Center)

  }

}

@Component
struct InnerComponent {

  @Link @Watch('onInnerDataChange') innerData: number

  onInnerDataChange() {

    console.info('InnerComponent', `get data value => ${this.innerData}`)

  }

  build() {}

}

更多关于HarmonyOS 鸿蒙Next 父组件与子组件中同步变量，在父组件中频繁更新数据在子组件中中间数据丢失的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，父组件与子组件间同步变量时，若父组件频繁更新数据导致子组件中间数据丢失，通常是因为数据同步机制或组件渲染时序问题。

鸿蒙系统提供了多种数据绑定和事件通信机制，以确保父子组件间的数据一致性。针对频繁更新数据的问题，可以采取以下措施确保数据同步：

  1. 使用全局状态管理：通过全局状态管理工具（如ArkUI中的@State或@Observable）管理共享数据，确保数据变更时所有相关组件都能及时响应。

  2. 事件回调机制：父组件更新数据时，通过事件回调通知子组件，子组件监听该事件并更新本地状态。

  3. 数据防抖与节流：在父组件数据更新逻辑中加入防抖或节流机制，减少数据更新频率，避免子组件频繁渲染导致的性能问题和数据丢失。

  4. 确保渲染时序：检查并确保子组件在父组件数据更新后正确渲染，可通过生命周期函数或渲染回调进行验证。

若上述方法仍无法解决问题，可能是系统或框架层面的bug。此时，请直接联系鸿蒙官方客服进行进一步排查和处理。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部