React 和 Framer Motion - 从列表中删除会导致在映射 returns 组件时播放初始动画

Question

有人可以向我解释为什么会出现这个问题吗？我有一个对象数组，这些对象被映射，并在添加到数组时淡入。

如果在地图内部，我 return 对象的实际 jsx 代码，那么当对象从数组中移除时，它会像它应该的那样为剩余的卡片设置动画。

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

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

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

你可以在这里看到一个比较（点击移除卡片）
映射 returning JSX 代码（有效）：https://codesandbox.io/s/crimson-http-qtpi0
映射 returning 组件（不起作用）：https://codesandbox.io/s/romantic-dewdney-dfqlp

我不是最了解 React 的人。谁能指出我解决这个问题的正确方向？谢谢。

Answer 1

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

事实上，如果您查看第二个示例的控制台，则会出现一个错误，准确地告诉您：

Warning: Each child in a list should have a unique "key" prop.

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

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

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

React 和 Framer Motion - 从列表中删除会导致在映射 returns 组件时播放初始动画

React & Framer Motion - Removing from list causes initial animation to play when map returns a component

javascript

reactjs

typescript

framer-motion