React Query乐观更新结合React Spring动画的重复动画问题求助

问题根源在于：乐观更新时使用了临时随机ID的Todo，服务器返回真实ID后，React会因为key值变化将其识别为全新元素，卸载旧组件并挂载新组件，导致动画重复执行。以下是针对性解决方案：

核心方案：复用组件实例，避免元素替换 #

通过给乐观Todo添加临时标识，在服务器返回真实数据时替换ID而非替换整个Todo元素，让React识别为同一组件的属性更新，而非重新渲染。

1. 修改Mutation配置 #

const queryClient = useQueryClient();

useMutation({
  mutationFn: updateTodo, // 假设该函数返回服务器端真实Todo数据
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries({ queryKey: ['todos'] });
    const previousTodos = queryClient.getQueryData(['todos']);
    
    // 生成带临时标记的乐观Todo
    const tempTodo = {
      id: `temp-${Date.now()}-${Math.random()}`,
      ...newTodo,
      isOptimistic: true // 标记为乐观更新项
    };

    queryClient.setQueryData(['todos'], (old) => [...(old || []), tempTodo]);

    return { previousTodos, tempId: tempTodo.id };
  },
  onSuccess: (serverTodo, _, context) => {
    // 找到临时Todo，替换为服务器返回的真实数据，保留原有位置
    queryClient.setQueryData(['todos'], (old) => {
      return old.map(todo => 
        todo.id === context.tempId ? { ...serverTodo, isOptimistic: false } : todo
      );
    });
  },
  onError: (err, _, context) => {
    // 回滚：移除临时Todo
    queryClient.setQueryData(['todos'], (old) => 
      old.filter(todo => todo.id !== context.tempId)
    );
    // 也可直接恢复之前状态：queryClient.setQueryData(['todos'], context.previousTodos);
  },
  onSettled: () => {
    // 按需决定是否失效查询，若onSuccess已精准更新数据，可省略此步
    // queryClient.invalidateQueries({ queryKey: ['todos'] });
  },
});

2. 控制动画触发时机 #

调整React Spring动画逻辑，确保仅在组件首次挂载时执行动画，而非每次props变化时触发：

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

const TodoItem = ({ todo }) => {
  // 仅在组件挂载时执行一次动画
  const props = useSpring({
    from: { opacity: 0, transform: 'translateY(20px)' },
    to: { opacity: 1, transform: 'translateY(0)' },
    dependencies: [] // 空依赖数组，避免props变化重启动画
  });

  return (
    <animated.div style={props} key={todo.id}>
      {todo.title}
      {todo.isOptimistic && <span>（保存中...）</span>}
    </animated.div>
  );
};

方案说明 #

• 临时标记isOptimistic可用于UI展示加载状态，提升用户体验
• onSuccess中直接修改查询数据而非失效查询，避免了重新拉取列表带来的额外请求
• 动画仅挂载执行一次，即使Todo的ID从临时值替换为真实值，组件未卸载重建，动画不会重复触发

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