使用 array.length+1 设置唯一 ID 会导致相同的 ID

Question

当点击一个按钮时，我调用一个函数来设置一个对象的唯一 ID，然后将该对象放入一个数组中：

 const addItems = (item) => {
    item.uniqueId = addedItems.length + 1;
    addedItems.push(item);
  };

如果我慢慢添加项目，它会按预期工作，但如果我每秒多次按下按钮，唯一 ID 将是相同的（并且是错误的，不是行中的：例如，如果我在数组中有 2 个项目，唯一 ID 为 1 和 2，然后快速按下按钮 3 次，这 3 个对象将具有唯一 ID 5，所有 3 个）。这里有什么问题？

Answer 1

假设它是状态，您必须始终以 不可变 方式更新它：

setAddedItems(ps=>[...ps,{...item,uniqueId:ps.length+1}])

确实如其他答案中所述，如果您删除项目，然后添加新项目，id 可能会重复；但是如果项目没有被删除，那么这个方法是可以的。

如果您也想删除项目，也可以勾选 uuid。

Answer 2

你的代码有很多缺点，我推荐你使用nanoid。如果您要从 useState 中删除项目，则某些 ID 可能相同。如果您不更改状态（删除项目），最好为此使用索引

它看起来像：

const addItems = (item) => {
  setAddedItems((addedItems) => [
    ...addedItems, { ...item, uniqueId: nanoid() }
  ])
}

Setting unique id with array.length+1 results in same ids