HarmonyOS 鸿蒙Next中@Builder的构造无法接收刷新的数据吗？

HarmonyOS 鸿蒙Next中@Builder的构造无法接收刷新的数据吗？

import { HMRouter } from '@hadss/hmrouter';

@HMRouter({pageUrl:'test2'})
@Component
export struct TestPage2 {
  @State li:string[] = []
  build() {
    Column(){
      List(){
        ListItem(){
          Button('增加')
            .onClick(() => {
              this.li.push('增加')
            })
        }

        ListItem(){
          // Column(){
          //   List(){
          //     ForEach(this.li,(str:string) => {
          //       ListItem(){
          //         Text(str)
          //       }
          //     })
          //   }
          // }

          this.testBuilder(this.li)
        }

        }


    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  [@Builder](/user/Builder)
  testBuilder(str:string[]) {
    Column(){
      List(){
        ForEach(str,(item:string) => {
          ListItem(){
            Text(item)
          }

        })
      }
    }
  }
}

将注释部分的代码用下面的Builder替代的话点击"增加"button不会显示增加的新的内容，但是用原来注释的内容就可以显示，这个是为什么呢？


更多关于HarmonyOS 鸿蒙Next中@Builder的构造无法接收刷新的数据吗？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

【解决方案】

在@Builder函数中，当传递的参数为状态变量时，状态变量的改变不会引起@Builder函数内的UI刷新。所以当使用状态变量的时候，推荐使用按引用传递，按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder函数内的UI刷新，可以参考官网按引用传递参数。

结合以上问题提供的代码，修改后如下：

// import { HMRouter } from '@hadss/hmrouter';

// @HMRouter({pageUrl:'test2'})
class Tmp {
  paramA1: string[] = [];
}
@Entry
@Component
export struct TestPage2 {
  @State li:string[] = []
  build() {
    Column(){
      List(){
        ListItem(){
          Button('增加')
            .onClick(() => {
              this.li.push('增加')
            })
        }

        ListItem(){
          // Column(){
          //   List(){
          //     ForEach(this.li,(str:string) => {
          //       ListItem(){
          //         Text(str)
          //       }
          //     })
          //   }
          // }

          this.testBuilder({paramA1:this.li})
        }

      }


    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  @Builder
  testBuilder(str:Tmp) {
    Column(){
      List(){
        ForEach(str.paramA1,(item:string) => {
          ListItem(){
            Text(item)
          }

        })
      }
    }
  }
}

更多关于HarmonyOS 鸿蒙Next中@Builder的构造无法接收刷新的数据吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，@Builder装饰的函数默认不会自动响应状态变量的变化。若需接收刷新数据，需结合@State或@Prop等状态管理装饰器，将动态数据作为参数传递至@Builder函数内。当状态变量更新时，框架会触发对应@Builder的重新执行，从而渲染最新数据。

在HarmonyOS Next中，@Builder函数默认不会自动响应状态变量的变化。当@State变量li被修改时，虽然组件会重新构建，但@Builder函数内部不会自动感知到参数str的变化。

这是因为@Builder函数在构建时捕获的是参数的当前值，而不是建立响应式依赖。当li数组通过push方法更新时，@Builder函数不会自动重新执行。

解决方案是使用@BuilderParam配合状态管理，或者直接在build方法内使用ForEach来确保响应式更新。注释代码能正常工作的原因是ForEach直接引用了@State变量li，建立了响应式关联。

建议将@Builder改为内联构建，或者使用@BuilderParam来传递构建逻辑，而不是直接传递数据参数。

回到顶部