React/NextJS 14重复子元素key为空警告排查求助

先排查links数组的真实性 #

先确认你用来循环的links数组里，每个元素的唯一属性（比如id、href）是不是真的没有重复。可以在循环前加个日志打印：

{console.log('当前links数组:', links)}
{links.map((linkInfo) => (
  <MemoriesLink key={linkInfo.id} {...linkInfo} isInMenu />
))}

要是发现有重复的属性值，得先修正数据源，确保每个linkInfo都有独一无二的标识。

别用Date.now()当Key #

Date.now()在同一轮循环里大概率会返回相同的时间戳（JS执行速度快，毫秒级时间戳没变化），直接导致多个子元素Key重复。这种方式绝对不能用，不仅解决不了问题，还会打乱React的组件复用逻辑。

检查MemoriesLink组件内部 #

警告说不定是从MemoriesLink组件里冒出来的——如果这个组件内部自己做了循环渲染（比如用map生成子元素）但没加唯一Key，React会把警告关联到父组件的这段代码里。打开MemoriesLink的实现，把里面所有循环生成的元素都加上唯一Key。

给外层motion.div加个Key试试 #

当menuFocusLevel在2和其他值之间切换时，这个motion.div会被卸载再重新挂载。如果links数组在这个过程里有变化（比如顺序调整、增删元素），用索引当Key容易让React搞混元素身份。可以先给外层容器加个固定Key：

{menuFocusLevel === 2 && (
  <motion.div
    key="submenu-container"
    initial={{ opacity: 0, x: -10 }}
    animate={{ opacity: 1, x: 0 }}
    exit={{ opacity: 0, x: 10 }}
    transition={{ duration: 0.16, type: "spring" }}
    className="absolute top-7 -right-1 bg-black w-48 border border-red flex flex-col py-0.5 rounded-l-sm rounded-br-sm"
  >
    {links.map((linkInfo) => (
        <MemoriesLink key={linkInfo.uniqueId} {...linkInfo} isInMenu />
    ))}
  </motion.div>
)}

这里的uniqueId要换成你linkInfo里真正唯一的属性，比如后端给的ID或者不会重复的路径。

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