Norsl
Norsl
  • 发布:2022-10-08 11:48
  • 更新:2023-05-05 11:39
  • 阅读:845

【报Bug】Uncaught TypeError: Cannot read property 'insert' of undefined at uni-app-view.umd.js:1

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

手机系统: 全部

手机机型: Mate 20

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

华为Mate20,鸿蒙OS:2.0.0

示例代码:

页面组件 page.vue 代码如下:

<template>  
    <view class="page">  
        <button @click="getData">重新获取数据</button>  
        <view class="list">  
            <CustomComponent v-for="item in list" :key="item.id" :item="item"></CustomComponent>  
        </view>  
    </view>  
</template>  

<script setup>  
import CustomComponent from "./custom-component.vue";  
import { ref } from "vue";  

const list = ref([  
    { id: 1, icon: "图片链接", content: "内容1" },  
    { id: 2, icon: "图片链接", content: "内容2" },  
    { id: 3, icon: "图片链接", content: "内容3" },  
]);  

// 模拟再次调用的方法(数据顺序不一致)  
function getData() {  
    list.value = [  
        { id: 3, icon: "图片链接", content: "内容3" },  
        { id: 1, icon: "图片链接", content: "内容1" },  
        { id: 2, icon: "图片链接", content: "内容2" },  
    ];  
}  
</script>

自定义组件 custom-component.vue 代码如下:

<template>  
    <view class="custom-component">  
        <view>ID: {{ item.id }}</view>  
        <view>Content: {{ item.content }}</view>  
    </view>  
</template>  

<script setup>  
const props = defineProps({  
    item: { required: true, type: Object, default: {} },  
});  
</script>  

<style lang="scss" scoped>  
.custom-component {  
    padding: 25rpx 0;  
}  
</style>

操作步骤:

上面代码示例为完整复现例子

预期结果:

再次获取数据后覆盖掉原数组页面正常显示排序后的数据

实际结果:

HBX调试控制台提示错误:Uncaught TypeError: Cannot read property 'insert' of undefined at uni-app-view.umd.js:1 并且页面显示的数据丢失

bug描述:

给定一个通过Ref定义的数组对象,页面上通过v-for循环渲染这个数组(循环的是自定义组件),绑定的key是数组对象中的id(不重复,数字类型)

首次能正常渲染出来,当再次通过接口重新获取数据后覆盖掉原数组(重新获取到的数据排序不一致),HBX调试控制台就会报以下这个错误,同时页面上丢失对应排序后的数据。

Uncaught TypeError: Cannot read property 'insert' of undefined at uni-app-view.umd.js:1
2022-10-08 11:48 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

如果不使用组件是否会有这个问题?

  • Norsl (作者)

    也会有这个问题

    2022-10-08 21:06

DCloud_UNI_WZF

DCloud_UNI_WZF

问题已确认,感谢反馈,已加分

DCloud_UNI_Anne

DCloud_UNI_Anne

HBuilderX3.6.7-alpha已修复

Edmin

Edmin

Uncaught TypeError: Cannot read properties of null (reading 'children') at uni-app-view.umd.js:1
这个错误是什么意思

要回复问题请先登录注册