乐观更新后数据不一致怎么办？

秋花🍀 提问于 2026-03-05 20:44:21 阅读 2

优化

我在用 React 做一个点赞功能，点了之后立刻更新 UI（乐观更新），但请求失败后不知道怎么回滚。

现在试过用 useState 保存旧值，但状态多了就乱了。比如：

const handleLike = async () => {
  const prevLiked = liked;
  const prevCount = likeCount;
  setLiked(true);
  setLikeCount(likeCount + 1);
  try {
    await api.like(postId);
  } catch (err) {
    setLiked(prevLiked); // 这里能回滚，但多个操作就不好维护了
    setLikeCount(prevCount);
  }
}

有没有更优雅的方式处理这种回滚？感觉每次都要手动存一堆 prev 变量太麻烦了。

乐观更新

我来解答赞 1 收藏

反馈

1 条解答

设计师一哲 Lv1

最简单的办法是用 useReducer 把相关状态打包，回滚时直接 dispatch 一个回滚 action。这样不用手动存每个状态：

const initialState = { liked: false, likeCount: 0 };



function reducer(state, action) {

  if (action.type === 'ROLLBACK') {

    return action.prevState;

  }

  // 其他action处理...

}



const handleLike = async () => {

  const prevState = state;

  dispatch({ type: 'LIKE' });

  try {

    await api.like(postId);

  } catch (err) {

    dispatch({ type: 'ROLLBACK', prevState });

  }

}

这样不管多少状态要回滚，一个 action 搞定。懒人最爱。

2026-03-05 21:04