HarmonyOS鸿蒙Next中使用自定义组件出现关于@BuilderParam的错误

HarmonyOS鸿蒙Next中使用自定义组件出现关于@BuilderParam的错误 使用下面的自定义组件是出现Error message:Use initParam/updateParm/resetParam(titleView) only to init/update/reset @Param. Internal error!错误。

下面是代码：

export enum LoadingState {
  off = 0,
  loading = 1,
  success = 2,
  failed = 3
}

@ComponentV2
export struct BaseLoadView {
  [@Param](/user/Param) @Require state: LoadingState;
  [@BuilderParam](/user/BuilderParam) @Require titleView: () => void;
  [@BuilderParam](/user/BuilderParam) @Require contentView: () => void;
  [@BuilderParam](/user/BuilderParam) @Require failedView: () => void;
  [@BuilderParam](/user/BuilderParam) @Require loadingView: () => void;

  build() {
    Column() {
      this.titleView()
      Stack() {
        if (this.state == LoadingState.loading) {
          this.loadingView()
        } else if (this.state == LoadingState.success) {
          this.contentView()
        } else if (this.state == LoadingState.failed) {
          this.failedView()
        }
      }.width('100%')
      .layoutWeight(1)
    }
    .height('100%')
    .width('100%')
  }
}

import { BaseLoadView, LoadingState } from "../component/BaseLoadView";

@Entry
@ComponentV2
export struct Index {
  @Local state: LoadingState = LoadingState.loading;

  aboutToAppear(): void {
    this.state = LoadingState.loading;
    setTimeout(() => {
      this.state = LoadingState.success;
    }, 5000)
  }

  @Builder
  title() {
    Row() {
      Text('title')
        .fontSize(20)
    }.width('100%')
    .height(100)
    .margin({ top: 50 })
  }

  @Builder
  loading() {
    Row() {
      LoadingProgress()
        .size({ width: 40, height: 40 })
    }
    .alignItems(VerticalAlign.Center)
    .width('100%')
    .height('100%')

  }

  @Builder
  content() {
    Row() {
      Text('content')
        .fontSize(20)

    }
    .alignItems(VerticalAlign.Center)
    .width('100%')
    .height('100%')
  }

  @Builder
  failed() {
    Row() {
      Text('failed')
        .fontSize(20)

    }
    .alignItems(VerticalAlign.Center)
    .width('100%')
    .height('100%')
  }

  build() {
    Column() {
      BaseLoadView({
        state: this.state,
        titleView: () => {
          this.title()
        },
        contentView: () => {
          this.content()
        },
        failedView: () => {
          this.failed()
        },
        loadingView: () => {
          this.loading()
        }

      })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中使用自定义组件出现关于@BuilderParam的错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复 
export enum LoadingState {
  off = 0,
  loading = 1,
  success = 2,
  failed = 3
}

@ComponentV2
export struct BaseLoadView {
  @Param state: LoadingState = LoadingState.off;
  @BuilderParam titleView: () => void;
  @BuilderParam contentView: () => void;
  @BuilderParam failedView: () => void;
  @BuilderParam loadingView: () => void;

  build() {
    Column() {
      this.titleView()
      Stack() {
        if (this.state == LoadingState.loading) {
          this.loadingView()
        } else if (this.state == LoadingState.success) {
          this.contentView()
        } else if (this.state == LoadingState.failed) {
          this.failedView()
        }
      }.width('100%')
      .layoutWeight(1)
    }
    .height('100%')
    .width('100%')
  }
}

@Entry
@ComponentV2
export struct Index {
  @Local state: LoadingState = LoadingState.loading;

  aboutToAppear(): void {
    this.state = LoadingState.loading;
    setTimeout(() => {
      this.state = LoadingState.success;
    }, 5000)
  }

  @Builder
  title() {
    Row() {
      Text('title')
        .fontSize(20)
    }.width('100%')
    .height(100)
    .margin({ top: 50 })
  }

  @Builder
  loading() {
    Row() {
      LoadingProgress()
        .size({ width: 40, height: 40 })
    }
    .alignItems(VerticalAlign.Center)
    .width('100%')
    .height('100%')

  }

  @Builder
  content() {
    Row() {
      Text('content')
        .fontSize(20)

    }
    .alignItems(VerticalAlign.Center)
    .width('100%')
    .height('100%')
  }

  @Builder
  failed() {
    Row() {
      Text('failed')
        .fontSize(20)

    }
    .alignItems(VerticalAlign.Center)
    .width('100%')
    .height('100%')
  }

  build() {
    Column() {
      BaseLoadView({
        state: this.state,
        titleView: () => {
          this.title()
        },
        contentView: () => {
          this.content()
        },
        failedView: () => {
          this.failed()
        },
        loadingView: () => {
          this.loading()
        }

      })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中使用自定义组件出现关于@BuilderParam的错误的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


问题出在 @BuilderParam 的使用方式上。在 BaseLoadView 组件中，@BuilderParam 参数被声明为必需参数，但在 Index 组件中传递时，使用了箭头函数包装 @Builder 方法，这导致了内部错误。

正确的做法是直接传递 @Builder 方法，而不需要额外的箭头函数包装：

BaseLoadView({
  state: this.state,
  titleView: this.title,      // 直接传递 @Builder 方法
  contentView: this.content,  // 直接传递 @Builder 方法
  failedView: this.failed,    // 直接传递 @Builder 方法
  loadingView: this.loading   // 直接传递 @Builder 方法
})

@BuilderParam 的设计目的是接收一个 @Builder 函数引用，而不是一个返回 @Builder 函数的闭包。当使用箭头函数 () => { this.title() } 时，实际上创建了一个新的函数包装器，这与 @BuilderParam 的参数类型不匹配，从而触发了内部错误。

修改后，@BuilderParam 参数将正确接收 @Builder 函数引用，错误应该会消失。

回到顶部