uni-app开发app渲染大数据列表时，列表中会出现undefined
uni-app开发app渲染大数据列表时，列表中会出现undefined
开发环境与版本信息
| 项目创建方式 | PC开发环境操作系统 | PC开发环境操作系统版本号 | HBuilderX类型 | HBuilderX版本号 | 手机系统 | 手机系统版本号 | 手机厂商 | 手机机型 | 页面类型 | vue版本 | 打包方式 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| HBuilderX | Windows | Windows 11 | 正式 | 3.8.4 | Android | Android 10 | OPPO | oppo r17 | vue | vue2 | 云端 |
示例代码
列表页: storeConversationList从vuex中获取
<u-list class="conversation_list" @scrolltolower="scrolltolower" v-if="storeConversationList.length">
<u-list-item v-for="item in storeConversationList" :key="item.conversationID"
@click="itemClick(item)">
<conversation-item @closeAllSwipe="closeAllSwipe" :source="item" :key="item.conversationID" />
</u-list-item>
</u-list>
conversationItem组件
<u-swipe-action-item :index="source.conversationID ? source.conversationID : ''" @click="clickConversationMenu($event,source)"
:name="source.conversationID ? source.conversationID : ''" :options="getSwipeActions || []">
<view @tap.prevent="clickConversationItem" class="conversation_item"
:class="{conversation_item_active:source.isPinned ? source.isPinned : false }">
<view class="left_info">
<my-avatar shape="circle" :isGroup="isGroup" :isNotify="isNotify" :src="source.faceURL ? source.faceURL : ''"
:desc="source.showName ? source.showName : ''" size='48' />
<view class="details">
<text class="nic">{{source.showName ? source.showName : ''}}</text>
<view class="lastest_msg_wrap">
<text class="lastest_msg_content">{{latestMessage}}</text>
<!-- <u-parse class="lastest_msg_content"
:content="latestMessage" /> -->
</view>
</view>
</view>
<view class="right_desc">
<text class="send_time">{{latestMessageTime}}</text>
<image v-if="notAccept" src="@/static/images/conversation_not_accept.png" />
<u-badge v-else max="99" :value="source.unreadCount ? source.unreadCount : ''"></u-badge>
</view>
</view>
</u-swipe-action-item>
渲染数据的时候出现了undefined。
操作步骤
- 登录后获取
conversationList然后存储到vuex中。 - 跳转到会话页后从vuex中加载会话列表并渲染列表。
预期结果
期望正常渲染会话列表数据。
实际结果
数据会加载出来，但是渲染的时候出现了undefined，实际上conversationList数据完整。
9 回复
u-list是uview ui的列表组件, 应用初始化完成后我拉取15条会话数据, 然后跳转到消息页的时候在computed里…mapGetters([‘storeConversationList’])获取会话数据进行渲染, 第一次渲染会出现这个问题, 退出应用再登录进来就没有undefined了,没找到问题所在, 还请大佬指示一下,谢谢！！！
楼主有定位到问题么，如果每一项那个内容不封装成单独组件好像不会有这个问题，带下拉刷新数据会重复的情况下会出来这个情况，我现在给每项都加了uid，保证key永远不会重复，但是不知道问题，所以也不要确定好了没。并且我打印了，界面上虽然显示undefined，但是其实传到item组件的数据都是完整的。貌似就ios会出来这个问题。搞得挺烦的，线上出来这个问题。
在uni-app开发过程中，当渲染大数据列表时遇到undefined的问题，通常是由于数据未正确初始化或数据绑定有误所导致。以下是一个使用Vue.js（uni-app基于Vue.js）处理大数据列表渲染的示例代码，同时确保数据不会出现undefined。
示例代码
- 页面模板（template）：
<template>
<view>
<scroll-view scroll-y="true" style="height: 100vh;">
<view v-for="(item, index) in listData" :key="index" class="list-item">
<text v-if="item !== undefined">{{ item.name }} - {{ item.value }}</text>
<text v-else>数据加载中...</text>
</view>
</scroll-view>
</view>
</template>
- 页面脚本（script）：
<script>
export default {
data() {
return {
listData: [] // 初始化一个空数组
};
},
methods: {
fetchLargeData() {
// 模拟异步获取大数据列表
setTimeout(() => {
// 假设我们从一个API获取数据
const largeDataList = [
{ name: 'Item 1', value: 'Value 1' },
{ name: 'Item 2', value: 'Value 2' },
// ... 更多数据
undefined, // 模拟一个未定义的数据项
{ name: 'Item 4', value: 'Value 4' }
];
// 过滤掉undefined的数据项
this.listData = largeDataList.filter(item => item !== undefined);
}, 2000); // 模拟网络延迟
}
},
mounted() {
this.fetchLargeData(); // 组件挂载后获取数据
}
};
</script>
- 页面样式（style）：
<style scoped>
.list-item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>
说明
- 数据初始化：在
data函数中初始化listData为一个空数组，确保在数据加载前不会渲染任何未定义的内容。 - 数据获取与过滤：在
fetchLargeData方法中模拟异步获取大数据列表，并使用filter方法过滤掉undefined的数据项。 - 条件渲染：在模板中使用
v-if指令确保只渲染非undefined的数据项，对于undefined的情况显示“数据加载中…”。 - 滚动视图：使用
<scroll-view>组件来支持大数据列表的滚动。
通过以上方法，可以有效避免在uni-app大数据列表渲染时出现undefined的问题，并确保数据的正确显示。
