无法修复警告检测到重复键：“0”。这可能会导致更新错误

Posted 2023-02-22

【中文标题】无法修复警告检测到重复键：“0”。这可能会导致更新错误

【英文标题】：Unable to fix a warning Duplicate keys detected: '0'. This may cause an update error

【发布时间】：2020-02-27 10:28:23

【问题描述】：

Vue js 抛出警告说 vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '0'。这可能会导致更新错误。

我尝试在计算变量中使用 getter 和 setter 并将值分派到 Vuex 存储。

这是html元素的代码

<!-- Displaying Sample TappingPessure input field-->
<v-layout 
wrap row
class="text-xs-left mx-auto pt-2"
style="height:50px;" >

...some code 

<v-flex xs12 md1 sm1 class="ma-0 pa-0"
>
    <v-text-field
    class="myfont1 inputValue"
    name="pressure" 
    id="pressure" 
    required  
    v-model="tappingPressure"
    type="number"
    reverse
    style="max-width:70px;"
        >
    </v-text-field>
</v-flex>
...some code   
</v-layout>
                                                   

这里是计算变量的代码

tappingPressure:
                get () 
                return this.$store.getters.tappingPressure
                ,
                set (value) 
                this.$store.dispatch('setTappingPressure',data:value)
                
            ,

这里是更新变量的vuex代码

import Vue from 'vue'
import Vuex from 'vuex'
import '@/firebase/init.js'
import  firebase from 'firebase/app'
import 'firebase/auth'


import router from "@/router.js"

Vue.use(Vuex)

export default new Vuex.Store(
  state: 
  ...some code
  
  tappingPressure:"",
  
  ...some code
  ,
  
  mutations: 
   setTappingPressure(state, payload) 
      state.tappingPressure = payload.data;
    ,
    
    ...some code
  ,
  
  actions: 
   setTappingPressure(
      commit
    , payload) 
      commit("setTappingPressure", payload);
    ,
    ...some code
    
   ,
   
   
   getters: 
   
   tappingPressure(state) 
      return state.tappingPressure;
    ,
    
    
   
);
  
  
  

这是错误截图

我试图将代码保留在步进器之外，调用 Vuetify 对话框的函数运行良好。当我从 Vuetify 步进器内部调用该函数时，会出现此问题。代码工作正常。 vuex 正在更新。警告消息充斥着控制台。

请有人提出一条出路。提前致谢

【问题讨论】：

该错误与您使用密钥有关。这就是模板中的 key 属性。我在您的模板中没有看到key，所以我们似乎遗漏了最重要的部分。

感谢您的回复。如何在模板中添加密钥？你能详细说明一下吗？

您不需要添加密钥。问题是您已经有一个密钥，但它被设置为不合适的值。根据图片，它似乎位于AnadezMain 的模板中。

谢谢你。您的回复帮助我自己解决了问题，我修复了它，正如您从我发布的答案中看到的那样。再次感谢.. 干杯

嗨，skirlte，事实上，问题并没有真正解决。我不得不花更多的时间在它上面。最后，正如您从我发布的答案中看到的那样，我想通了。无论如何，谢谢。

【参考方案1】：

问题是模板中有2个列表渲染...... 在两者中，我都使用“索引”进行键绑定，如下所示

v-for="(compo,index) in compoDataAz" :key="index" 
v-for="(compo, index) in analyteData" :key="index" 

我都改成了

v-for="(compo,index) in compoDataAz" :key="'compo'+index"
v-for="(compo, index) in analyteData" :key="'analyte'+index"

这解决了问题。警告的原因是我使用“索引”作为两个列表渲染的键。最后我很庆幸自己想通了。只是分享这个以防其他人发现它有帮助。

【讨论】：

这对我来说不合适。仅仅重命名一个局部变量并不能解决重复键的问题。典型的解决方案是使用前缀或后缀来确保密钥是唯一的，例如，:key="'compo' + index" 用于一个，:key="'analyte' + index" 用于另一个。

感谢您的建议。我更新了我的模板。你的建议比较实用。再次感谢。我的代码现在看起来好多了。

是因为你还有index重命名为i吗？

我按照您的建议更改了它。现在一切都好！谢谢:)