HarmonyOS 鸿蒙Next 自定义组件不能自动更新UI的一种情况,可能涉及@BuilderParam、@LocalBuilder、@Prop
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)。
我并没有在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