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 {}@BuilderListItemBuilder(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鸿蒙开发的学习记录，如果对你有用，你可以点个赞哦～～。详细的文档还是以官方文档为主。