HarmonyOS鸿蒙开发 BuilderParam在父组件的Builder的点击事件报错：Error message:is not callable

HarmonyOS鸿蒙开发 BuilderParam在父组件的Builder的点击事件报错：Error message:is not callable

最近在鸿蒙开发过程中，UI做好了，根据列表item进行点击跳转，报错了
报错信息如下

Error message:is not callable
Stacktrace:
    at anonymous (entry/src/main/ets/pages/demolab/BuilderDemoPage.ets:42:7)

一、报错的代码示例

首先我创建了一个BuilderDemoPage，里面需要Column，Column中有一个List
代码如下

@ComponentV2
export struct BuilderDemoPage {
  @Local message: string = 'Hello World';
  @Consumer('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  @Param dataList: string[] = [];

  aboutToAppear(): void {
    for (let index = 0; index < 50; index++) {
      this.dataList.push('第' + index.toString() + '行');
    }
  }

  aboutToDisappear(): void {
  }

  onNavBackClick(): void {
  }

  onListItemClick(item: string): void {
  }

  @Builder
  ListItemBuilder(index: number) {
    Column() {
      Text(this.dataList[index])
        .fontSize(25)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height(50)
    .onClick(() => {
      this.onListItemClick(this.dataList[index])
    })
  }

  build() {
    NavDestination() {
      Column() {
        BuilderListView({
          dataList: this.dataList,
          listItem: this.ListItemBuilder,
        })
      }
      .width('100%')
      .height('100%')
    }
    .title("BuilderDemoPage")
    .hideTitleBar(false)
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })
    .width('100%')
    .height('100%')
  }
}

列表BuilderListView，通过传入listItem和dataList
BuilderListView代码如下

@ComponentV2
export struct BuilderListView {
  @BuilderParam listItem: (index: number) => void;
  @Param dataList: string[] = [];

  aboutToAppear(): void {
  }

  aboutToDisappear(): void {
  }

  build() {
    Column() {
      List() {
        ForEach(this.dataList, (item: string, index: number) => {
          ListItem() {
            this.listItem(index);
          }
        })
      }
    }
    .width('100%')
    .height('100%')
  }
}

当点击列表时候，会出现
Error message:is not callable

二、修改报错

问题分析，在JS中，this指向有问题，当以listItem: this.ListItemBuilder, 传入的时候；ListItemBuilder中的this指向的是子类，子类中并无onListItemClick方法，出现Error message:is not callable错误。

我迷需要修改，将listItem: this.ListItemBuilder修改成如下

 listItem: (index)=>{
            this.ListItemBuilder(index);
          },

完整解析

在js中调用this时需要注意this的指向。当前代码在子组件中声明builder方法时，this指向的是父组件，而@Builder ListItemBuilder()通过this.ListItemBuilder的形式传给子组件@BuilderParam listItem，this指向在Child的label，即“Child”，所以在点击事件响应的时候，this是指向Child而Child中没有onListItemClick()所以出现jscrash。

参考官方网址
https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-229-V5

三、小结

我在开发中遇到在js中调用this时需要注意this的指向导致报错，做一下记录，这里是学习HarmonyOS鸿蒙开发的学习记录，如果对你有用，你可以点个赞哦～～。详细的文档还是以官方文档为主。