Next.js记忆游戏开发：如何为数组元素添加唯一键？

先明确你两次尝试的问题：

• 尝试1用Math.random()生成order作为键，存在两个问题：一是有极小概率生成重复值，触发React的key冲突；二是每次组件重渲染时，这个随机值会重新生成，导致所有卡牌被不必要地重新渲染，一旦出现key冲突，React的diff算法失效，就会表现出“没效果”的情况。
• 尝试2的concat(cards.order = Math.random())属于用法错误：concat用于拼接数组或元素，而cards.order = Math.random()是赋值语句，返回的是这个随机数本身，所以会把单个数字作为元素追加到数组末尾，根本没给原有元素添加键。

下面是两种可靠的解决方案：

方案1：使用原生UUID生成唯一ID #

现代浏览器、Node.js（包括Next.js环境）都支持crypto.randomUUID()，能生成全球唯一的标识符，完全避免重复：

const lettersX2 = letters.concat(letters)
  // 先给每个复制后的元素添加唯一id
  .map(card => ({ ...card, id: crypto.randomUUID() }))
  // 再打乱数组顺序
  .sort(() => Math.random() - 0.5);

方案2：使用自增计数器生成唯一ID #

如果不想依赖UUID，用自增数字也能保证绝对唯一，实现更简单：

let idCounter = 0;
const lettersX2 = letters.concat(letters)
  .map(card => ({
    ...card,
    id: idCounter++ // 每次映射自增，确保每个元素id唯一
  }))
  .sort(() => Math.random() - 0.5);

关键注意事项 #

在React渲染卡牌列表时，一定要把新生成的id作为元素的key属性，比如：

{lettersX2.map(card => (
  <Card key={card.id} {...card} />
))}

不要用数组索引或Math.random()生成的值作为key——前者在数组顺序变化时会导致React渲染异常，后者会触发不必要的重渲染。

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