b***@163.com
b***@163.com
  • 发布:2025-04-22 22:18
  • 更新:2025-05-08 19:27
  • 阅读:270

【报Bug】list-view组件的list-item通过组件实现,组件在变更data属性报错

分类:uni-app x

产品分类: uni-app x/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: Alpha

HBuilderX版本号: 4.62

手机系统: Android

手机系统版本号: Android 15

手机厂商: 华为

手机机型: nova10

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

index.uvue
<template>
<view style="flex: 1;background-color: #d1d1d1;">
<list-view :scroll-y="true" class="page" bounces="true" show-scrollbar="true" style="flex: 1;" >

        <list-item class="content-item" style="height: 200px;;">  
            <text class="text">向上滑动页面,体验sticky-header吸顶效果。 </text>  
        </list-item>  
    <sticky-item></sticky-item>  
    </list-view>  
</view>   

</template>

<script>
export default {
}
</script>

组件:sticky-item <template> <sticky-header> <scroll-view style="background-color: #f5f5f5; flex-direction: row;" direction="horizontal"

show-scrollbar="false"> <view style="align-self: flex-start; flex-direction: row;">
<text ref="swipertab" style="padding-right: 20px;height: 30px;" v-for="index in 5"
@click="clickTH(index)">
DAAA{{index}}
</text>
</view>
</scroll-view>
</sticky-header>

<list-item>  
    <swiper :current-item-id="currentItemId">  
        <swiper-item v-for="i in 5" :item-id="'itemid'+i">  
            <view v-for="index in 10" :key="index">  
                <text style="height: 80px;">{{i}}===>{{index}}</text>  
            </view>  
        </swiper-item>  
    </swiper>  
</list-item>  

</template>

<script>
export default {
name: "stick-item",
data() {
return {
currentItemId: "itemid0"
}
},
methods: {
clickTH: function (index : number) {
console.log(index);
this.currentItemId = "itemid" + index
},
}
}
</script>

操作步骤:

可正常执行

预期结果:

可正常执行

实际结果:

执行报错:
22:14:34.006 java.lang.NullPointerException
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:966)
at android.os.Handler.dispatchMessage(Handler.java:110)
at android.os.Looper.loopOnce(Looper.java:205)
at android.os.Looper.loop(Looper.java:293)
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:966)
at android.os.Handler.dispatchMessage(Handler.java:110)
at android.os.Looper.loopOnce(Looper.java:205)
at android.os.Looper.loop(Looper.java:293)
at android.app.ActivityThread.loopProcess(ActivityThread.java:9986)
at android.app[CONSOLE] [{"type":"string","value":"Possible Unhandled Promise Rejection:"},{"className":"java.lang.NullPointerException","type":"object","subType":"error","value":{"properties":[{"type":"null","name":"cause","value":"null"},{"type":"null","name":"message","value":"null"}],"stack":"java.lang.NullPointerException\n\tat io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$componentUpdateFn$1.invoke(index.kt:6509)\n\tat io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$componentUpdateFn$1.invoke(index.kt:6424)\n\tat io.dcloud.uniapp.vue.ReactiveEffect.invokeFn(index.kt:343)\n\tat io.dcloud.uniapp.vue.ReactiveEffect.access$invokeFn(index.kt:323)\n\tat io.dcloud.uniapp.vue.ReactiveEffect$run$1.invoke(index.kt:367)\n\tat io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$2.invoke(index.kt:6535)\n\tat io.dcloud.uniapp.vue.IndexKt$setupRenderEffect$2.invoke(index.kt:6534)\n\tat io.dcloud.uniapp.vue.IndexKt$flushJobs$1.invoke(index.kt:5162)\n\tat java.lang.reflect.Method.invoke(Native Method)\n\ta.ActivityThread.main(ActivityThread.java:9975)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:586)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1240)
22:14:34.008 t io.dcloud.uts.UTSPromiseKt$callFunction$invoke$1.invoke(UTSPromise.kt:31)\n\tat io.dcloud.uts.UTSPromiseKt.callFunction(UTSPromise.kt:42)\n\tat io.dcloud.uts.UTSPromiseKt$handleUTSPromise$1.invoke(UTSPromise.kt:439)\n\tat java.lang.reflect.Method.invoke(Native Method)\n\tat io.dcloud.uts.UTSPromiseKt$callFunction$invoke$1.invoke(UTSPromise.kt:31)\n\tat io.dcloud.uts.UTSPromiseKt.callFunction(UTSPromise.kt:42)\n\tat io.dcloud.uts.UTSPromise$Companion$_immediateFn$1.invoke(UTSPromise.kt:367)\n\tat io.dcloud.uts.UTSPromise$Companion$_immediateFn$1.invoke(UTSPromise.kt:366)\n\tat io.dcloud.uts.UTSTimerKt$setTimeout$runnable$1.doSth(UTSTimer.kt:115)\n\tat io.dcloud.uts.UTSRunnable.run(UTSTimer.kt:69)\n\tat android.os.Handler.handleCallback(Handler.java:966)\n\tat android.os.Handler.dispatchMessage(Handler.java:110)\n\tat android.os.Looper.loopOnce(Looper.java:205)\n\tat android.os.Looper.loop(Looper.java:293)\n\tat io.dcloud.px.h2.a(SourceFile:60)\n\tat io.dcloud.px.h2$$ExternalSyntheticLambda1.run(D8$$SyntheticClass:0)\n\tat android.os.Handler.handleCallback(Handler.java:966)\n\tat android.os.Handler.dispatchMessage(Handler.java:110)\n\tat android.os.Looper.loopOnce(Looper.java:205)\n\tat android.os.Looper.loop(Looper.java:293)\n\tat android.app.ActivityThread.loopProcess(ActivityThread.java:9986)\n\tat android.app.ActivityThread.main(ActivityThread.java:9975)\n\tat java.lang.reflect.Method.invoke(Native Method)\n\tat com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:586)\n\tat com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1240)\n"}}]---END:CONSOLE---

bug描述:

list-view组件的list-item通过组件实现,组件在变更data属性报错
如果页面完整的使用list-view(不将list-item代码移到组件)就能正常执行
点击 切换文本,会报错,如下图

2025-04-22 22:18 负责人:DCloud_UNI_WZF 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

问题复现,感谢反馈,已加分

DCloud_UNI_JBB

DCloud_UNI_JBB

方便发个可复现demo嘛

  • b***@163.com (作者)

    忘了说,需要点击切换文本触发事件才会报错,请看上图,demo.zip 还是一样会报错

    2025-04-23 21:51

DCloud_UNI_WZF

DCloud_UNI_WZF

暂时可通过把 list-view 及子节点封装到一个组件中规避该问题

  • b***@163.com (作者)

    频道页面就是一个list-view,每个频道页都不一样,吸顶前面的内容完全不同,吸顶后面的内容才是一样的,

    2025-05-08 19:56

要回复问题请先登录注册