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

设计师春芳提问于 2026-03-08 18:15:19 阅读 418

优化

我用 React 做了个点赞功能，点了之后立刻更新 UI（乐观更新），但请求失败时 UI 没变回去，反而卡在“已点赞”状态。是不是哪里没处理好？

我试过在 catch 里手动 revert 状态，但有时候会因为组件卸载导致 setState 报错。下面是我简化后的代码：

<button onClick={handleLike}>
  {{ isLiked ? '已点赞' : '点赞' }}
</button>

// handleLike 伪逻辑：
// setLiked(true)
// api.like().catch(() => setLiked(false))

我来解答赞 3 收藏

反馈

1 条解答

FSD-新云 Lv1

这确实是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调用方式。建议优先用上面这个方案，我们项目里基本都这么处理，稳得很。

2026-03-08 19:00