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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/74034.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简化神经元模型6 -- Hindmarsh-Rose Model

Hindmarsh-Rose 模型 目录 0. 写在前面 1. Hindmarsh-Rose 模型的定义 2. Hindmarsh-Rose 模型簇发放的动力学机制 3. Hindmarsh-Rose 模型的其他发放模式 4. 分析过程所用到的一系列 BrainPy 代码 0. 写在前面 前面介绍了: Hodgkin-Huxley Model 简化神经元模型1 – LIF M…

第六届电气、电子信息与通信工程国际学术会议 (EEICE 2025)

重要信息 官网&#xff1a;www.eeice.net&#xff08;点击了解参会投稿等&#xff09; 时间&#xff1a;2025年4月18-20日 地点&#xff1a;中国-深圳技术大学 简介 第六届电气、电子信息与通信工程 (EEICE 2025&#xff09;将于2025年4月18-20日在中国深圳召开。 EEICE 20…

计算机操作系统(三) 操作系统的特性、运行环境与核心功能(附带图谱更好对比理解))

计算机操作系统&#xff08;三&#xff09; 操作系统的特性、运行环境与核心功能 前言一、操作系统的基本特性1.1 并发1.2 共享1.3 虚拟1.4 异步 二、操作系统的运行环境2.1 硬件支持2.2 操作系统内核2.3 处理机的双重工作模式2.4 中断与异常 三、操作系统的主要功能3.1 处理机…

Linux(Ubuntu)系统安装Docker与Docker Compose完整指南

本文是为需要在Ubuntu系统部署容器服务的开发者准备的详细教程。我们将分两个主要部分讲解&#xff1a;Docker引擎的标准安装流程和Docker Compose的配置方法。所有操作均在终端执行&#xff0c;建议使用Ubuntu 18.04及以上版本。 一、Docker引擎安装全流程 &#xff08;总耗时…

批量将 PPT 转换为PDF/XPS/JPG图片等其它格式

PPT 文档经常有转换为其它格式的需求&#xff0c;比如将 PPT 转换为 PDF、将 PPT 转换为图片、生成 PPT 预览图等&#xff0c;这在某些场景下非常的有用&#xff0c;今天给大家介绍的就是如何批量将 PDF 转换为 PDF、JPG、Tiff 等多种格式的操作。 在工作中我们经常需要接触 PP…

c库、POSIX库、C++库、boost库之间的区别和联系

文章目录 一、区别1. 定义和来源2. 功能范围3. 可移植性4. 语言支持5. 维护和更新 二、联系1. 相互补充2. 部分功能重叠3. 共同促进编程发展4. 代码兼容性 三、总结 一、区别 1. 定义和来源 C 库函数&#xff1a;由 ANSI C 和 ISO C 标准定义&#xff0c;是 C 语言编程的基础…

响应压缩导致的接口请求response没有响应体问题排查

目录 一、背景二、排查过程三、解决方法四、学习与思考-响应压缩&#xff08;一&#xff09;可能原因&#xff08;二&#xff09;深入排查&#xff08;三&#xff09;注意 一、背景 接口发布到测试环境&#xff0c;测试同学说没有数据 二、排查过程 1、本地用相同的参数、相…

JVM中的运行时常量池详解

运行时常量池&#xff08;Runtime Constant Pool&#xff09;是每一个类或接口的常量池&#xff08;Constant_Pool&#xff09;的运行时表示形式&#xff0c;它包括了若干种不同的常量&#xff1a;从编译期可知的数值字面量到必须运行期解析后才能获得的方法或字段引用。运行时…

C# MethodBase 类使用详解

总目录 前言 在C#编程中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许我们在运行时检查和操作类型的成员。MethodBase 类是.NET框架中 System.Reflection 命名空间下的一个抽象类&#xff0c;它是所有方法( MethodInfo 和 Constructor…

【css酷炫效果】纯CSS实现3D翻转卡片动画

【css酷炫效果】纯CSS实现3D翻转卡片动画 缘创作背景html结构css样式完整代码效果图 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u011561335/90490472 缘 创作随缘&#xff0c;不定时更新。 创作背景 刚看到csdn出活动了&am…

Flask多参数模版使用

需要建立目录templates&#xff1b; 把建好的html文件放到templates目录里面&#xff1b; 约定好参数名字&#xff0c;单个名字可以直接使用&#xff1b;多参数使用字典传递&#xff1b; 样例&#xff1a; from flask import render_template # 模板 (Templates) #Flask 使用…

SVN简明教程——下载安装使用

SVN教程目录 一、开发中的实际问题二、简介2.1 版本控制2.2 Subversion2.3 Subversion的优良特性2.4 工作原理2.5 SVN基本操作 三、Subversion的安装与配置1. 服务器端程序版本2. 下载源码包3. 下载二进制安装包4. 安装5. 配置版本库① 为什么要配置版本库&#xff1f;② 创建目…

OpenCV图像拼接(1)概述

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 此图说明了在Stitcher类中实现的拼接模块流程。使用该类&#xff0c;可以配置/移除某些步骤&#xff0c;即根据特定需求调整拼接流程。流程中的所…

Ubuntu20.04安装Nvidia显卡驱动

Ubuntu20.04安装Nvidia显卡驱动 安装环境为Dell R540服务器 官网下载Nvidia显卡驱动 https://www.nvidia.cn/geforce/drivers/ 安装显卡驱动 chmod x NVIDIA-Linux-x86_64-470.63.01.run sudo ./NVIDIA-Linux-x86_64-470.63.01.run 遇到nouveau报错 lsmod查看nouveau驱动…

互联网it常用抓包工具说明

一、引言 在互联网 IT 领域&#xff0c;无论是网络故障排查、安全检测&#xff0c;还是开发调试&#xff0c;抓包工具都发挥着举足轻重的作用。 当网络出现故障&#xff0c;比如网页加载缓慢、应用无法连接服务器时&#xff0c;抓包工具可以帮助我们捕获网络数据包&#xff0…

Linux 音频驱动 WM8960 音频 DAC IC 音乐播放与录音

这些先引出一个内容&#xff0c;是 Linux 内核的音频系统&#xff0c;ALSA&#xff0c;提供了对声卡的低级访问&#xff0c;支持 PCM&#xff0c;播放/录音、混音、MIDI 处理等功能。它取代了旧的 OSS&#xff0c;并提供更强大的功能和更好的硬件支持。 ALSA 主要特点&#xf…

k8s中的组件

1.namespace Namespace 用于将集群资源划分为不同的逻辑组&#xff0c;方便管理和隔离 kubectl get namespace 查看所有逻辑组 kubectl describe namespace <namespace-name> 查看某个逻辑组信息详情 kubectl create namespace ... 创建逻辑组 kubectl delete names…

OpenHarmony 开源鸿蒙北向开发——3.配置SDK

安装、配置完成之后我们就要配置SDK。 我们创建工程后&#xff0c;点击右上角设置 进入设置 进入OpenHarmony SDK&#xff0c;选择编辑 这里配置一下SDK安装位置 点击完成 这里我们API版本勾选第一个即可 确认安装 勾选接受 这里要等一会 安装完成后&#xff0c;点击完成

5.2《生活中的透镜》——5.3《凸透镜成像规律》讲后再上

教会什么:照相机、投影仪、放大镜的原理 培养什么:(再说) 课标: (二)运动和相互作用 2.3 声和光 2.3.5了解凸透镜成像规律的应用。 例7 了解凸透镜成像规律在放大镜、照相机中的应用。 一、导入 提问:生活中有哪些透镜?(放大镜、照相机、投影仪/幻灯机) ——直接提出…

怎么用LoRA的低秩结构近似Fisher矩阵

怎么用LoRA的低秩结构近似Fisher矩阵 目录 怎么用LoRA的低秩结构近似Fisher矩阵**1. Fisher矩阵的内存挑战****2. LoRA的低秩结构与Fisher近似****3. 具体实现步骤****4. 示例说明****5. 有效性分析****6. 扩展与优化****总结**在LoRA(低秩适应)中,通过低秩结构近似Fisher矩…