并发插入数组，导致列表内组件渲染失败

分类：uni-app

uniapp

平台：IOS
版本：4.87
VUE：2

插入数组方法

// 发送消息后和收到消息后会调用插入方法  
this.chatList.unshift(chatData);

视图代码，会导致text-item不显示

<view v-for="item in chatList" :key="item.msgId">  
    <view v-if="item.msgType=='text'">  
        <base-item :chat-item="item" @chat-longpress="chatLongpress">  

            <text-item :text="item.msgBody" :isSelf="item.isSelf"></text-item>  
        </base-item>  
    </view>  
<view>  

子组件  
<template>  
    <view>  
        <view class="padding-sm radius" :class="[isSelf?'bg-blue':'bg-light-blue']">  
            <rich-text class="text-df" style="word-break:break-all;" :class="[isSelf?'bg-blue':'']" :nodes="text"></rich-text>  
        </view>  
    </view>  
</template>

2026-02-10 14:01 负责人:无分享

3 个回复

Ask小助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

在 uni-app 的 iOS 端（App-vue 页面）里，“并发 unshift 数组导致 v-for 内组件不渲染” 99% 是因为 key 取的是 item.msgId，而业务上 msgId 出现了重复，Vue 在 diff 时把新旧节点误认为是同一个节点，于是复用了旧 DOM，结果新插入的节点就被“吃掉”了，看起来就像 text-item 没渲染出来。

知识库中没有直接提到“并发 unshift 导致不渲染”这一条，但 “key 重复导致 v-for 渲染异常” 是 Vue 的通用机制，uni-app 也遵循这一机制。

解决思路（完全基于知识库可确认的内容）

保证 key 唯一
把 key 换成真正不会重复的字段，或者拼接一个自增计数器：
```
<view v-for="(item, index) in chatList"  
     :key="`${item.msgId}_${index}`">  
```

避免在同一毫秒插入多条消息
如果 msgId 是前端生成的时间戳，并发时很容易重复。可以改成：

const chatData = {  
 ...msg,  
 msgId: `${Date.now()}_${Math.random().toString(36).substr(2, 6)}`  
};  
this.chatList.unshift(chatData);

调试验证
在真机 Safari 控制台里打印 chatList 的 key，确认没有重复即可验证问题是否解决。

按以上步骤处理后，text-item 即可正常渲染。

内容为 AI 生成，仅供参考

勇敢的心_ (作者) - 始于1994

绝对不是什么msgId重复了，之前并发插入的时候，导致从某一条开始，组件数据全部错乱

2026-02-10 14:09 分享

2***@qq.com

用this.$set 更新数据
或者this.$forceUpdate() 强制更新数据
确保:key="item.msgId"是唯一的

2026-02-10 14:20 分享

勇敢的心_ (作者)

msgId是雪花ID字符串，不会重复

没有更新数据，只有插入数据

2026-02-10 14:24
2***@qq.com

你不是视图不更新吗？参考一下vue2的手册看看。。unshift刚好不被vue检测到的

2026-02-10 14:32

要回复问题请先登录或注册

并发插入数组，导致列表内组件渲染失败

3 个回复

公告

相关问题

并发插入数组，导致列表内组件渲染失败

与内容相关的链接

3 个回复

公告

相关问题