- 发布: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
产品分类: 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