JavaScript向数组push对象时生成唯一ID解决key重复报错

API 探路者

2026-8-29

问题成因

两个逻辑错误直接导致key重复：

唯一ID生成逻辑只在data对象初始化时执行了一次，后续所有对data的引用都复用这同一个固定ID值
循环中执行push(data)推入的是同一个对象的内存引用，不是独立的对象副本——这种写法不止是key重复，后续修改数组中任意一个元素的属性，所有数组元素都会同步变更。

修复方案

最稳妥的实现是把固定的data对象改造为对象工厂函数，将ID生成逻辑移入函数内部，保证每次调用都会生成新ID、返回独立的对象实例，循环时每次调用工厂函数拿到新对象再推入数组即可。

第一步：改造原data定义

// 原固定对象改为工厂函数，每次调用返回全新的独立对象
export const createDataItem = () => {
  // ID生成逻辑移入函数内，每次调用都会生成新的唯一值
  const id = Math.random().toString(16).slice(2);
  return {
    key: id,
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'other',
    caseOutcome: 'pending',
    completion: 'n',
    currentDate: 'f',
  };
};

第二步：调整数组生成逻辑

const dataArray = [];
const randomNum = Math.floor(Math.random() * 10);
for (let i = 0; i < randomNum; i++) {
  // 每次循环调用工厂函数，生成带独立ID的新对象再推入数组
  dataArray.push(createDataItem());
}

可选简化写法

如果你不想改动原有data的导出结构，也可以在推入数组时对原对象做浅拷贝，同时覆盖key为新生成的ID，代码如下：

import { data } from '你的data文件存放路径';

const dataArray = [];
const randomNum = Math.floor(Math.random() * 10);
for (let i = 0; i < randomNum; i++) {
  const newId = Math.random().toString(16).slice(2);
  // 浅拷贝原对象属性，替换key为新生成的唯一值
  dataArray.push({ ...data, key: newId });
}