JavaScript/React为现有20条用户数据实现新增ID自增

不要直接取数组最后一项的ID做+1操作——如果后续做过数据删除、数组排序调整，最后一项的ID不一定是全局最大值，很容易出现ID重复的问题，正确做法是先遍历数组拿到所有现有条目的最大ID，再在此基础上+1作为新条目ID。

具体代码实现（适配data.js场景） #

假设userRows为存储用户数据的数组，每个用户对象携带数字类型的id属性，构造newUser的代码如下：

// 计算现有用户数据的最大ID
// 你预置了1-20共20条数据的场景下，首次计算得到的maxId为20
const maxId = userRows.reduce((currentMax, user) => {
  // 兼容个别条目id缺失、id为非数字类型的异常场景，避免计算结果为NaN
  const userId = Number.isFinite(user.id) ? user.id : 0;
  return userId > currentMax ? userId : currentMax;
}, 0); // 初始最大值设为0，兼容空数组场景，空数组时新ID从1开始生成

// 构造新用户对象，id赋值为最大ID+1
const newUser = {
  id: maxId + 1,
  // 其余业务字段（用户名、年龄、权限等）按实际需求补充即可
  username: '示例新用户',
  // ...其他字段
};

// 将新用户推入用户数组完成新增
userRows.push(newUser);

边界场景说明 #

• 空数组兼容：如果userRows被清空无有效数据，上述逻辑会自动从1开始生成ID，不会抛出错误或生成非法ID
• 非连续ID兼容：如果数组存在ID断层（比如删除过id=15的用户，剩余条目最大ID为20），新生成ID仍为21，不会主动填补断层ID，符合业务系统通用自增ID规则
• 旧数据兼容：如果数组内残留之前nanoid生成的字符串类型ID，逻辑会自动将这类非数字ID按0处理，不会打断最大值计算流程

如果你能100%确定数组永远按ID升序排列、且永远不会删除中间条目，也可以简化最大值计算逻辑为const maxId = userRows.at(-1)?.id ?? 0，但更推荐使用reduce遍历取最大值的写法，鲁棒性更强，后续调整业务逻辑时不容易出ID重复的bug。

内容的提问来源于stack exchange，提问作者Student