乐观更新后 UI 没回滚，状态怎么处理？

这个问题挺常见的，乐观更新失败后状态回滚没处理好，就会出现 UI 和实际状态不一致的情况。

最直接的解决方案是用一个标记来控制是否更新状态：

const [isLiked, setLiked] = useState(false);

// 用 ref 记录组件是否已卸载

const isMounted = useRef(true);



useEffect(() => {

  return () => {

    isMounted.current = false;

  };

}, []);



const handleLike = async () => {

  // 先乐观更新

  setLiked(true);

  

  try {

    await api.like();

  } catch (error) {

    // 只有组件还在mounted时才回滚状态

    if (isMounted.current) {

      setLiked(false);

    }

  }

};

这样组件卸载后就不会再执行 setState 了。

不过更推荐的做法是用现成的库，比如 React Query 或者 SWR，它们内置了乐观更新和自动回滚的机制，帮你省掉很多这种边界情况的处理：

import { useMutation, useQueryClient } from '@tanstack/react-query';



const queryClient = useQueryClient();



useMutation({

  mutationFn: () => api.like(),

  onMutate: async () => {

    // 乐观更新：先缓存当前状态，再更新 UI

    await queryClient.cancelQueries({ queryKey: ['likeStatus'] });

    const previousStatus = queryClient.getQueryData(['likeStatus']);

    queryClient.setQueryData(['likeStatus'], true);

    return { previousStatus };

  },

  onError: (err, newStatus, context) => {

    // 请求失败时回滚到之前的状态

    queryClient.setQueryData(['likeStatus'], context.previousStatus);

  },

});

如果你不想引入额外依赖，第一种 ref 方案就够用了。记得在清理函数里把 isMounted 设为 false，这样就能安全处理组件卸载的情况。

这确实是React乐观更新的经典坑。官方文档里说处理异步操作时要考虑组件卸载的情况，我一般在项目里这么处理：

1. 用一个ref记录组件是否已卸载
2. catch里先检查这个ref再setState

改后的代码大概这样：

function LikeButton() {

  const [isLiked, setLiked] = useState(false);

  const isMounted = useRef(true);



  useEffect(() => {

    return () => {

      isMounted.current = false;

    };

  }, []);



  const handleLike = () => {

    setLiked(true);

    api.like().catch(() => {

      if (isMounted.current) {

        setLiked(false);

      }

    });

  };



  // ...button渲染部分

}

或者更简单的方案是用AbortController取消请求，不过要改api调用方式。建议优先用上面这个方案，我们项目里基本都这么处理，稳得很。