[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.

1、处理antd 下拉数据时遇到报错

2、报错代码

html:
<a-col :xxl="8" :xl="12" :sm="24" class="ex-item">
 <a-form-item label="后台IP地址：">
    <a-select
      placeholder="请选择后台IP地址"
      v-decorator="[
        'serverIp']"
      @select="getPort"
    >
      <a-select-option
        :value="item.serverIp"
        v-for="item in ipList"
        :key="item.connType"
      >
        {{ item.serverIp }}
      </a-select-option>
    </a-select>
  </a-form-item>
</a-col>

js:
// 选中IP地址，获取端口号
getPort(value) {
  console.log(value);
  // this.infoForm.setFieldsValue({
  //   serverPort: this.filiterIp(value)
  // })
},

3、下拉数据：

4、value绑定了重复值，虽然key值绑定的不是serveIp(即重复值)，还是报错了，所以把value绑定上唯一值，且对自己需求有用的值（不然叫后台给！）, 正确代码：

<a-col :xxl="8" :xl="12" :sm="24" class="ex-item">
<a-form-item label="后台IP地址：">
    <a-select
      placeholder="请选择后台IP地址"
      v-decorator="[
        'serverIp']"
      @select="getPort"
    >
      <a-select-option
        :value="item.connType"
        v-for="item in ipList"
        :key="item.connType"
      >
        {{ item.serverIp }}
      </a-select-option>
    </a-select>
  </a-form-item>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" class="ex-item">
  <a-form-item label="后台端口号：">
    <a-input
      disabled
      v-decorator="['serverPort']"
      placeholder="请输入后台端口号"
    />
  </a-form-item>
</a-col>

// 选中IP地址，获取端口号
getPort(value) {
  this.infoForm.setFieldsValue({
    serverPort: this.filiterIp(value)
  })
},
// 过滤Ip地址
filiterIp(data) {
  let arr = this.ipList.filter(i => {
    return i.connType == data
  })
  return arr && arr.length > 0 ?arr[0].port: undefined;
},

想你随风起，不想你却不随风停