React&成帧器运动-从列表中删除会在贴图返回组件时播放初始动画

Question

有人能向我解释为什么会发生这个问题吗？我有一个被映射的对象数组，当添加到数组中时会淡入。

如果在映射中，我返回对象的实际jsx代码，那么当对象从数组中移除时，它会像应该的那样为剩余的卡设置动画。

{cards.map((c) => {
return (
<motion.div
key={key}
variants={variant}
layout}
>
...ETC
</motion.div>
);
})}

但是，如果在贴图内使用单独的组件，它不会设置动画，而是导致移除对象后的所有对象再次在不透明度中淡入。

{cards.map((c) => {
return <Card data={card} />;
})}

你可以在这里看到一个比较(点击删除卡片(
返回JSX代码的地图(作品(：https://codesandbox.io/s/crimson-http-qtpi0
映射返回组件(不起作用(：https://codesandbox.io/s/romantic-dewdney-dfqlp

我不是React方面受教育程度最高的人。有人能为我指出解决这个问题的正确方向吗？非常感谢。

Answer 1

当您返回这样的元素列表时，每个元素都需要有一个唯一的键道具。这样，当列表发生变化时，React可以识别哪些元素发生了变化。(您可能有多个元素具有相同的数据。(

事实上，如果你在第二个例子的控制台中查看，会有一个错误准确地告诉你：

警告：列表中的每个子级都应该有一个唯一的"键"；道具

要修复它，请向<Card>元素添加一个唯一的密钥道具，就像您在第一个示例中所做的那样。

我不确定您的npa或npx值是否保证是唯一的。如果没有，则可以将id字段添加到数据中。

{cards.map((c) => {
return <Card data={card} key={c.id} />;
})}