- 发布：2022-10-08 11:48
- 更新：2023-05-05 11:39
- 阅读：849
【报Bug】Uncaught TypeError: Cannot read property 'insert' of undefined at uni-app-view.umd.js:1
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 12.6
HBuilderX类型： 正式
HBuilderX版本号： 3.6.4
手机系统： 全部
手机机型： Mate 20
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
页面组件 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>
页面组件 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 并且页面显示的数据丢失
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
Norsl (作者)
也会有这个问题
2022-10-08 21:06