HarmonyOS 鸿蒙Next 自定义组件不能自动更新UI的一种情况,可能涉及@BuilderParam、@LocalBuilder、@Prop

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

HarmonyOS 鸿蒙Next 自定义组件不能自动更新UI的一种情况,可能涉及@BuilderParam@LocalBuilder@Prop

在使用自定义组件时遇到一个问题,还不能确定是哪里的问题,下面是代码和分析

// 通用子页面,通过BuilderParam自定义内容区
[@Component](/user/Component)
struct ChildPage {
  [@BuilderParam](/user/BuilderParam) contentBuilder: () => void

  build() {
    Column() {
      this.contentBuilder()
    }
  }
}

// 自定义组件,包括一个Prop修饰的变量
[@Component](/user/Component)
struct TestHint {
  [@Prop](/user/Prop) text: string

  build() {
    Row() {
      Text(`text: ${this.text}`)
    }
  }
}

// 主要页面
[@Component](/user/Component)
struct ParentPage {
  [@State](/user/State) text: string = 'Parent'

  [@LocalBuilder](/user/LocalBuilder)
  centerContent() {
    // 在LocalBuilder中自定义内容区,创建自定义组件A
    TestHint({
      text: this.text
    })
     // 组件C
    Text(`text: ${this.text}`)

    Button('点击改变text内容')
      .onClick(() => {
        this.text = 'Change';
      })
  }

  build() {
    Column() {
      ChildPage({
        contentBuilder: () => {
          this.centerContent()
        }
      })
      // 直接创建自定义组件B
      TestHint({
        text: this.text
      })
    }
  }
}
 

问题:点击按钮后text更新,但自定义组件A没有更新,组件B、C都能正常更新。 B组件更新说明自定义组件没有问题,C组件更新说明LocalBuilder修饰的centerContent中this指向没问题,能感知到text变量的变化,A应该能自动更新才对。

尝试解决: 断点查看组件A涉及的text变量也没有发现异常,但就是感知不到变化,查看相关文档没有找到合理的解释。 在调试过程中偶然出现了C组件正常更新的情况,没有复现,个人感觉像是Bug一样。

组件A能更新的方法包括: 1、将centerContent的[@LocalBuilder](/user/LocalBuilder)改为[@Builder](/user/Builder)。 2、将TestHint中的Text变量[@Prop](/user/Prop)改为[@Link](/user/Link)。

4 回复
你好,你这个是按值传递的写法,当然不会更新啦,详情请参考官方文档,[@LocalBuilder](/user/LocalBuilder)按引用传递

我并没有在LocalBuilder函数中通过传参传递状态变量,而是直接在函数里使用状态变量。而且LocalBuilder改成Builder就能更新了。

你那个不更新的原因就是按值传递,首次渲染后后续不再更新

针对HarmonyOS 鸿蒙Next 自定义组件不能自动更新UI的问题,若涉及@BuilderParam@LocalBuilder@Prop,这通常与组件的数据传递和状态管理有关。

  • @BuilderParam:用于承接@Builder函数的变量,确保在初始化自定义组件时正确传递参数。如果UI未更新,检查参数传递是否正确,以及是否每次更新都触发了@BuilderParam的重新计算。
  • @LocalBuilder:用于在组件内定义私有构建函数,确保组件的父子关系和状态管理的父子关系一致。如果UI未更新,尝试确认@LocalBuilder内的状态变量是否已正确按引用传递,并检查状态变量的变化是否触发了UI刷新。
  • @Prop:用于父子组件间的单向数据同步。如果子组件的UI未随父组件状态更新,检查@Prop变量是否已正确绑定到父组件的状态变量,并确认父组件状态变化时是否触发了子组件的重新渲染。

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

回到顶部