Skip to content

封装多层组件,picker-view-column 报错 #5558

@lixun027

Description

@lixun027

发行方式

App

具体平台

Android

开发环境

Windows

项目创建方式

HBuilderX

依赖版本

HBuilder X v4.66

问题描述

封装多层组件,picker-view-column 报错,代码如下

<!-- index.uvue -->
<template>
	<view>
		<PopupViewUvue v-model="show">
			<DatePickerViewUvue/>
		</PopupViewUvue>
	</view>
</template>

<script setup lang="ts">
	import PopupViewUvue from '@/components/popup-view/popup-view.uvue';
	import DatePickerViewUvue from '@/components/picker-view/date-picker-view.uvue';
</script>

我一个一个注释掉的 放开picker-view-column 时出现报错信息。picker-view-column 里面什么都没有也报错

代码如下:
<template>
	<view class="date-picker-view-box">
		<picker-view class="picker-view-box" :indicator-style="'height: 40px;'"
			:value="[selectedYearIndex, selectedMonthIndex, selectedDayIndex]" @change="onChange"
			:mask-top-style="'background-image: linear-gradient(to top, rgba(255, 248, 255, 0.8), rgba(255, 255, 255, 1));'"
			:mask-bottom-style="'background-image: linear-gradient(to bottom, rgba(255, 248, 255, 0.8), rgba(255, 255, 255, 1));'"
			>
			<picker-view-column class="picker-view-column-box">
				<!-- <view class="item" v-for="(year, index) in years" :key="index"> -->
					<!-- <text class="text">
						{{ year }}<text class="text" v-if="index === selectedYearIndex"> 年</text>
					</text> -->
				<!-- </view> -->
			</picker-view-column>
		</picker-view>
	</view>
</template>

报错信息如下:

10:07:23.617 java.lang.NullPointerException: null cannot be cast to non-null type io.dcloud.uniapp.runtime.UniElement{ io.dcloud.uniapp.runtime.ElementKt.Element }
	at io.dcloud.uniapp.framework.UniPickerViewColumn.gen_setCurrent_fn(index.kt:1415)
	at io.dcloud.uniapp.framework.UniPickerViewColumn$setCurrent$1.invoke(index.kt:1412)
	at java.lang.reflect.Method.invoke(Native Method)
	at io.dcloud.uniapp.vue.shared.IndexKt$createMethodInvoker$1.invoke(index.kt:709)
	at io.dcloud.uniapp.vue.shared.IndexKt.callFunction(index.kt:727)
	at io.dcloud.uniapp.vue.VueComponent.$callMethod(index.kt:3608)
	at io.dcloud.uniapp.framework.UniPickerView$4$1.invoke(index.kt:1082)
	at io.dcloud.uniapp.framework.UniPickerView$4$1.invoke(index.kt:1080)
	at io.dcloud.uts.UTSArray.forEach(UTSArray.kt:809)
	at io.dcloud.uniapp.framework.UniPickerView$4.invoke(index.kt:1080)
	at java.lang.reflect.Method.invoke(Native Method)
	at io.dcloud.uniapp.vue.shared.IndexKt$createMethodInvoker$1.invoke(index.kt:709)
	at io.dcloud.uniapp.vue.shared.IndexKt.callFunction(index.kt:727)
	at io.dcloud.uniapp.vue.IndexKt.callWithErrorHandling(index.kt:2999)
	at io.dcloud.uniapp.vue.IndexKt.callWithAsyncErrorHandling(index.kt:3008)
	at io.dcloud.uniapp.vue.IndexKt.callWithAsyncErrorHandling(index.kt:3016)
	at io.dcloud.uniapp.vue.IndexKt$doWatch$fn$1.invoke(index.kt:3309)
	at io.dcloud.uniapp.vue.IndexKt$doWatch$fn$1.invoke(index.kt:3290)
	at io.dcloud.uniapp.vue.IndexKt.flushPreFlushCbs(index.kt:5103)
	at io.dcloud.uniapp.vue.IndexKt.flushPreFlushCbs$default(index.kt:5090)
	at io.dcloud.uniapp.vue.IndexKt.updateComponentPreRender(index.kt:6812)
	at io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$componentUpdateFn$1.invoke(index.kt:6490)
	at io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$componentUpdateFn$1.invoke(index.kt:6424)
	at io.dcloud.uniapp.vue.ReactiveEffect.invokeFn(index.kt:343)
	at io.dcloud.uniapp.vue.ReactiveEffect.access$invokeFn(index.kt:323)
	at io.dcloud.uniapp.vue.ReactiveEffect$run$1.invoke(index.kt:367)
	at io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$2.invoke(index.kt:6535)
	at io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$2.invoke(index.kt:6534)
	at io.dcloud.uniapp.vue.IndexKt.updateComponent(index.kt:6348)
	at io.dcloud.uniapp.vue.IndexKt.processComponent(index.kt:6292)
	at io.dcloud.uniapp.vue.IndexKt.patch(index.kt:6212)
	at io.dcloud.uniapp.vue.IndexKt.patchKeyedChildren(index.kt:6888)
	at io.dcloud.uniapp.vue.IndexKt.patchChildren(index.kt:6840)
	at io.dcloud.uniapp.vue.IndexKt.patchElement(index.kt:6740)
	at io.dcloud.uniapp.vue.IndexKt.processElement(index.kt:6281)
	at io.dcloud.uniapp.vue.IndexKt.patch(index.kt:6210)
	at io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$componentUpdateFn$1.invoke(index.kt:6509)
	at io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$componentUpdateFn$1.invoke(index.kt:6424)
	at io.dcloud.uniapp.vue.ReactiveEffect.invokeFn(index.kt:343)
	at io.dcloud.uniapp.vue.ReactiveEffect.access$invokeFn(index.kt:323)
	at io.dcloud.uniapp.vue.ReactiveEffect$run$1.invoke(index.kt:367)
	at io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$2.invoke(index.kt:6535)
	at io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$2.invoke(index.kt:6534)
	at io.dcloud.uniapp.vue.IndexKt$flushJobs$1.invoke(index.kt:5162)
	at java.lang.reflect.Method.invoke(Native Method)
	at io.dcloud.uts.UTSPromiseKt$callFunction$invoke$1.invoke(UTSPromise.kt:31)
	at io.dcloud.uts.UTSPromiseKt.callFunction(UTSPromise.kt:42)
	at io.dcloud.uts.UTSPromiseKt$handleUTSPromise$1.invoke(UTSPromise.kt:439)
	at java.lang.reflect.Method.invoke(Native Method)
	at io.dcloud.uts.UTSPromiseKt$callFunction$invoke$1.invoke(UTSPromise.kt:31)
	at io.dcloud.uts.UTSPromiseKt.callFunction(UTSPromise.kt:42)
	at io.dcloud.uts.UTSPromise$Companion$_immediateFn$1.invoke(UTSPromise.kt:367)
	at io.dcloud.uts.UTSPromise$Companion$_immediateFn$1.invoke(UTSPromise.kt:366)
	at io.dcloud.uts.UTSTimerKt$setTimeout$runnable$1.doSth(UTSTimer.kt:115)
	at io.dcloud.uts.UTSRunnable.run(UTSTimer.kt:69)
	at android.os.Handler.handleCallback(Handler.java:751)
	at android.os.Handler.dispatchMessage(Handler.java:95)
	at android.os.Looper.loop(Looper.java:154)
	at io.dcloud.px.h2.a(SourceFile:60)
	at io.dcloud.px.h2$$ExternalSyntheticLambda1.run(D8$$SyntheticClass:0)
	at android.os.Handler.handleCallback(Handler.java:751)
	at android.os.Handler.dispatchMessage(Handler.java:95)
	at android.os.Looper.loop(Looper.java:154)
	at android.app.ActivityThread.main(ActivityThread.java:6176)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:893)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:783)

重现步骤

定义一个弹出公共组件,作用是用来 从底部弹出的。定义一个 年月日组件,年月日组件显示在弹出组件上

<template>
	<view>
		<PopupViewUvue v-model="show">
			<DatePickerViewUvue/>
		</PopupViewUvue>
	</view>
</template>

<script setup lang="ts">
	import PopupViewUvue from '@/components/popup-view/popup-view.uvue';
	import DatePickerViewUvue from '@/components/picker-view/date-picker-view.uvue';
</script>

期望行为

No response

实际行为

No response

截图或录屏

No response

Activity

lixun027

lixun027 commented on Jun 18, 2025

@lixun027
Author

不是多层嵌套、单层也报错,只要把 picker-view-column 写成组件,就有那个错误

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @lixun027

        Issue actions

          封装多层组件,picker-view-column 报错 · Issue #5558 · dcloudio/uni-app