next.js 警告:遇到两个孩子有相同的键,

4si2a6ki  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(114)

我正在使用ReactJS,NextJS 14,Tailwind CSS和Framer Motion。
在React中,我必须为每个重复的子元素放置唯一的键,所以我必须在NextJS中这样做。这也是为什么我将子元素的索引值作为它们的键,因为索引值将是唯一的,数组中的每个元素都增加一个。然而,警告一直说我什么都没放。我无法理解,所以:我在控制台中记录了该值,它显示了预期的数字(0,1,2...);将该值更改为linkInfo的属性之一,该属性是唯一的;我甚至试着把Date.now()放在那里。它们都显示了预期的唯一值,但警告是一样的:
Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behaviour is unsupported and could change in a future version.
这就是造成那个问题的代码。当我删除这个代码时,问题就消失了。

{menuFocusLevel === 2 && (
  <motion.div
    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, menuLinkIdx) => (
        <MemoriesLink key={menuLinkIdx} {...linkInfo} isInMenu />
    ))}
  </motion.div>
)}

字符串
我试着添加重复的孩子,我希望他们不要在键上犯任何错误。

t9aqgxwy

t9aqgxwy1#

我的问题是Framer Motion。我用<AnimatePresence /> Package 了代码。但是在那个标签里面有两个<motion.div />标签,这导致了键的问题。在每个<AnimatePresence />标签中分离两个组件后,警告消失了。

相关问题