【报Bug】uniapp开发app渲染大数据列表时，列表中会出现undefined

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： window11

HBuilderX类型：正式

HBuilderX版本号： 3.8.4

手机系统： Android

手机系统版本号： Android 10

手机厂商： OPPO

手机机型： oppo r17

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

列表页: 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数据完整

bug描述：

列表页: 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，首先

飞书20230629-171053.zip

2023-06-29 17:26 负责人:无分享

4 个回复

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866

u-list 是什么组件？数据量大的用nvue的list、recycle-list

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

u-list是uview ui的列表组件, 应用初始化完成后我拉取15条会话数据, 然后跳转到消息页的时候在computed里...mapGetters(['storeConversationList'])获取会话数据进行渲染, 第一次渲染会出现这个问题, 退出应用再登录进来就没有undefined了,没找到问题所在, 还请大佬指示一下,谢谢！！！

2023-06-30 10:37
superfang2022

回复 2***@qq.com:我也出现和你类似的问题，列表渲染有概率出现undifined。有解决方案了吗

2023-10-13 14:54