7***@qq.com
7***@qq.com
  • 发布:2024-03-06 18:06
  • 更新:2024-04-11 13:15
  • 阅读:200

【报Bug】skyline 在自定义组件中使用v-for 报错误信息

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

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

第三方开发者工具版本号: vscode 1.87.0

基础库版本号: 3.0.0-3081220230817001

项目创建方式: CLI

CLI版本号: 3.0.0-3081220230817001

示例代码:
<template>  
  <swiper  
    class="swiper"  
    :indicator-dots="true"  
    :autoplay="true"  
    :interval="5000"  
    :duration="500"  
    :circular="true"  
  >  
    <swiper-item v-for="item in props.banners" list-item>  
      <image class="swiper-img" mode="aspectFill" :src="item.url"></image>  
    </swiper-item>  
  </swiper>  
</template>  
<script setup lang="ts">  
import { withDefaults } from "vue";  

interface Banner {  
  url: string;  
}  

const props = withDefaults(  
  defineProps<{  
    banners: Array<Banner>;  
    width: string;  
    height: string;  
  }>(),  
  {  
    banners: [] as Array<Banner>,  
    width: "100vw",  
    height: "400rpx",  
  }  
);  
</script>  
<style lang="less" scoped>  
.swiper,  
.swiper-item,  
.swiper-img {  
  width: v-bind("width");  
  height: v-bind("height");  
}  
</style>

操作步骤:

自定banner组件 在index.vue中引用

预期结果:

正常渲染

实际结果:

正常渲染, 但是微信编辑器有报错信息
Error: The for-list data is neither Array nor Object, got type "undefined".
at Je.updateKeys (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at Je.diff (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at o (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.handleChildrenUpdate (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at s (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.handleChildrenUpdate (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at s (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.handleChildrenUpdate (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.update (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at ht.updateValues (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)(env: macOS,mp,1.06.2402021; lib: 3.3.3)

bug描述:

skyline 在自定义组件中使用v-for 报错误信息 但是不影响渲染结果

2024-03-06 18:06 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

你加个if试试

爱豆豆

爱豆豆 - 办法总比困难多

不需要props. 把 直接使用banners再试试
如果还有问题 就检查你的banners数据是否正确

  • 7***@qq.com (作者)

    都试过了 甚至直接不使用props 直接const一个 依旧是报错

    2024-03-06 18:10

  • 爱豆豆

    回复 7***@qq.com: 我用了你的代码片段可以运行 不报错

    2024-03-06 18:15

  • 爱豆豆

    你提供一个复现这个问题的demo出来

    2024-03-06 18:16

  • 7***@qq.com (作者)

    回复 爱豆豆: 你是否开启了微信开发者工具的skyline渲染,在webview下是没这问题的

    2024-03-06 18:21

  • 7***@qq.com (作者)

    回复 爱豆豆: 附件已经增加了demo

    2024-03-06 18:23

  • 爱豆豆

    回复 7***@qq.com: 开了skyline渲染

    2024-03-06 18:28

  • 7***@qq.com (作者)

    回复 爱豆豆: 你用我的demo试试

    2024-03-06 18:29

  • 爱豆豆

    回复 7***@qq.com: 看我截图 对不对

    2024-03-06 18:36

爱豆豆

爱豆豆 - 办法总比困难多

根据你提供的demo 运行后也没有报错

  • 7***@qq.com (作者)

    我的渲染也是没问题的,但是在微信开发者工具中有报错

    2024-03-06 18:42

zZZ1Ma

zZZ1Ma

看下你编译后的组件js中banners是Array还是null或undefined?ts编译会有这样的问题,建议将src属性更改为可选链语法:item?.url

<swiper-item v-for="item in banners" list-item>    
    <image class="swiper-img" mode="aspectFill" :src="item?.url"></image>    
</swiper-item>  
7***@qq.com

7***@qq.com (作者)

微信开发者工具

  • 爱豆豆

    一样的 我也是用的微信开发者工具 但是我这边没报错

    2024-03-07 08:51

  • RayJazon

    回复 爱豆豆: 你都没开启 skyline 肯定没报错啊

    2024-03-13 13:42

  • 爱豆豆

    回复 z***@163.com:感谢

    2024-03-13 14:16

  • 爱豆豆

    你更新下微信开发者工具试试 我开不开skyline都不会出现这个错误 我用的是最新版的开发者工具

    2024-03-13 14:18

一片云

一片云

skyline v-for 会出现这个提示,哪位大佬有时间排查下原因呗~

要回复问题请先登录注册