解决“Duplicate keys detected: ‘ ‘.This may cause an update error.”问题

问题原因

出现"Duplicate keys detected"的错误,通常表示在v-for指令中使的:key绑定值有重复。

如果前端是静态数据,一般能自我避免:key绑定值有重复。如果前端是绑定的动态数据,那么需要另外提供一个唯一的键。

在这个例子中,我因为用:key="item.unitCode"为每个提供一个唯一的键(以为不是重复的),结果报了几屏的错。unitCode值是后端传递并且有重复值,所以出现了该错误。😂

复制代码
<el-option  
  v-for="(item, index) in streetData"  
  :key="item.unitCode"  
  :label="item.unitName"  
  :value="item.unitCode"  
>  
</el-option>

解决方法

1、修复后端数据或使用index

因为重复的键可能会导致前端和其他地方的问题。与后端开发者合作时,确保他们返回的数据中的某个值是唯一的,在绑定到key上。

如果不需要对该数据做操作,可以用index做key值。 如果要对该数据做操作,不可以用index做key值。像数组,使用index作为 key和没写基本上没区别,因为不管数组的顺序怎么颠倒,index都是0,1,⒉.这样排列,导致Vue 会复用错误的旧子节点,做很多额外的工作。

复制代码
<el-option  
  v-for="(item, index) in streetData"  
  :key="index"  
  :label="item.unitName"  
  :value="item.unitCode"  
>  
</el-option>

2、使用组合键

如果unitCode在某些情况下可能不是唯一的,但与其他字段(如unitName)组合起来是唯一的,你可以使用这两个字段的组合作为键。

复制代码
<el-option  
  v-for="item in streetData"  
  :key="`${item.unitCode}-${item.unitName}`"  
  :label="item.unitName"  
  :value="item.unitCode"  
>  
</el-option>

3、添加一个唯一的ID

如果后端无法确保unitCode的唯一性,并且你不能使用组合键,那么你可以在后端添加一个唯一的ID字段,或者在前端为每个选项生成一个唯一的ID。

复制代码
<el-option  
      v-for="(item, index) in streetData"  
      :key="`unique-${index}-${item.unitCode}`"  
      :label="item.unitName"  
      :value="item.unitCode"  
    >  
    </el-option>  

key的作用

1、v-if中使用key作为用来标识一个独立的元素,没有特定作用。

2、v-for中使用key作用是为了高效的更新渲染虚拟DOM。

Vue 使用一个基于虚拟 DOM 的高效更新算法(称为"就地更新策略"),来尽可能复用 DOM 元素以减少不必要的性能开销。当列表的数据发生变化时,Vue 会尝试通过改变 DOM 的最小量来更新视图。

相关推荐
彭于晏爱编程2 分钟前
你真的了解 Map、Set 嘛
前端
崔璨5 分钟前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv6 分钟前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒17 分钟前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
lichong95117 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone
whysqwhw35 分钟前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端
dasseinzumtode1 小时前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰1 小时前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss1 小时前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship1 小时前
网页截图API-Npm工具包分享
前端