React-Framer Motion数组新增首项时仅最后项动画的问题求助

你遇到的问题核心是用数组索引作为React元素的key。当向数组头部添加新元素时，原数组中所有元素的索引都会向后偏移一位：

• 原索引0的元素现在变成索引1
• 新元素占据索引0
  React的diff算法会误判为：索引0的元素被替换成新内容，原来最后一个索引的元素被移除、新增了一个元素在最后位置。这就导致Framer Motion错误地给最后一项触发动画，而非新添加的首项。

解决方案 #

1. 给元素分配唯一稳定的标识

修改元素生成逻辑，为每个元素创建唯一ID，避免依赖索引作为身份标识：

const [list, setList] = useState([])

const addToList = () => {
    // 生成带唯一ID的元素对象
    let newElement = {
        id: Date.now() + Math.random().toString(36).substr(2, 9),
        content: (Math.random() + 1).toString(36).substring(7)
    }
    setList(prevState => ([newElement, ...prevState]))
}

2. 使用唯一ID作为组件key

在映射数组时，用元素的唯一ID替代索引作为key，确保React能正确识别每个组件的身份：

return (
    <div className="flex flex-col bg-white h-screen">
        <button onClick={() => addToList()} className="bg-blue-500 p-2 rounded-lg text-white">Add to List</button>
        <p className="mt-2">List:</p>
        <div className="flex flex-col mt-4">
            {
                list.map((item) => {
                    return (
                        <motion.div 
                            key={item.id}
                            initial={{ scale: 0 }} 
                            animate={{ scale: 1 }}
                            transition={{ type: "spring", stiffness: 300 }}
                        >
                            <p>{item.content}</p>
                        </motion.div>
                    )
                })
            }
        </div>
    </div>
)

关键原理 #

React依赖key识别组件的唯一性，当key变化时，React会销毁旧组件并创建新组件，从而触发Framer Motion的initial动画。如果用索引作为key，数组顺序变化时元素对应的key会错位，React会错误复用组件，导致动画触发不符合预期。

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