使用react-spring给map渲染的列表加动画时出现重复key报错如何解决

使用react-spring为map函数渲染的列表添加动画效果时，即使已为每一项设置了唯一业务ID，key取值逻辑为{key: item => item.order.id}，React仍然会抛出存在两个相同key子元素的错误。

核心原因 #

这一问题通常源于react-springuseTransition钩子的状态缓存逻辑和数组更新方式不匹配：useTransition会基于传入的列表和指定的key函数内部维护元素的进出状态，如果你修改列表时使用了push、splice、直接下标赋值等原地修改操作，没有返回全新的数组引用，react-spring无法正确识别旧元素的卸载状态，会将缓存的旧项和新加入的项判定为同时存在，进而触发key重复报错。

解决步骤 #

• 所有列表更新操作替换为不可变写法
  删除项使用filter：const newList = oldList.filter(item => item.order.id !== targetId)
  新增项使用扩展运算符：const newList = [...oldList, newItem]
  修改项使用map返回新对象：const newList = oldList.map(item => item.order.id === targetId ? {...item, ...updatedProps} : item)
• 不要在渲染transition返回的动画元素时重复声明key属性
  你已经在useTransition的配置中指定了key生成规则，后续渲染时不需要再给动画元素加key，重复/错误的key声明会触发判定异常，正确写法参考：

  import { useTransition, animated } from '@react-spring/web'
  
  function List({ listData }) {
    const transitions = useTransition(listData, {
      key: item => item.order.id,
      from: { opacity: 0, x: -20 },
      enter: { opacity: 1, x: 0 },
      leave: { opacity: 0, x: 20 },
    })
  
    return transitions((style, item) => (
      // 此处无需额外加key属性
      <animated.div style={style}>
        {item.order.content}
      </animated.div>
    ))
  }
  

• 若仍存在报错，可在key返回值中添加唯一前缀验证业务ID是否真的全局唯一：key: item => order-item-${item.order.id}``，排除业务数据本身的重复问题。

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