React Spring useTransition渲染问题：重复数字引发重复增删元素

问题根源 #

useTransition 默认以数组元素本身作为唯一标识（key），当数组包含重复值时，React 无法区分不同元素，会错误触发重复的移除与添加动画。

解决方案 #

无需为每个元素单独创建 useTransition，只需给数组元素添加唯一标识，并在 useTransition 中指定 key 提取规则即可：

修改后的代码示例 #

import { useState } from 'react';
import { useTransition, animated } from '@react-spring/web';

function App() {
  // 将原字符串数组改为带唯一ID的对象数组
  const [lista, setLis] = useState([
    { id: 1, value: '5' },
    { id: 2, value: '0' }
  ]);

  const hour = useTransition(lista, {
    from: { opacity: 0, y: -50 },
    enter: { opacity: 1, y: 0 },
    leave: { opacity: 0, y: 50 },
    exitBeforeEnter: true,
    config: { duration: 400 },
    // 指定用对象的id作为元素唯一标识
    key: item => item.id
  });

  return (
    <div>
      {hour((style, item) => (
        <animated.div style={style}>
          <h2 className="mb-0 text-warning">
            {item.value}
          </h2>
        </animated.div>
      ))}
      {/* 示例：点击切换为包含重复数字的数组 */}
      <button onClick={() => setLis([
        { id: 1, value: '0' },
        { id: 2, value: '0' }
      ])}>切换重复数字</button>
    </div>
  );
}

export default App;

核心说明 #

• 把原字符串数组替换为包含id（唯一标识）和value（原数字内容）的对象结构，确保每个元素拥有独一无二的标识。
• 在useTransition配置中添加key: item => item.id，让 React Spring 基于唯一ID识别元素，而非元素的内容值。

这样即使数组中存在重复的数字，React 也能准确区分每个元素，避免重复触发动画操作。

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