React点赞功能状态异常：点赞计数加1正常，取消点赞时却减2的问题排查

看起来你遇到的问题根源在于在一个状态更新的回调中嵌套调用另一个状态更新，同时本地状态没有和props同步导致的不一致。让我一步步帮你分析和解决：

问题原因分析 #

你当前的handlePostLikeClick函数里，在setIsPostLiked的更新回调中嵌套了setLikesCount：

setIsPostLiked((prevIsLikedState) => {
  setLikesCount((prevLikesCountState) => {
    return prevIsLikedState ? prevLikesCountState - 1 : prevLikesCountState + 1;
  });
  return !prevIsLikedState;
});

这种写法有两个核心隐患：

1. React的状态更新函数应该是纯函数，不应该在内部包含副作用（比如调用另一个setState）。在并发模式下，React可能会重新运行状态更新函数，导致setLikesCount被意外执行多次，这就是你看到取消点赞时计数减2的直接原因之一。
2. 你的本地状态（isPostLiked、likesCount）仅在组件初始化时从props获取值，但如果父组件更新了post的isLiked或likes属性，本地状态不会自动同步，这会导致状态和实际数据不一致，进一步引发计数混乱。

解决方案 #

方案1：拆分状态更新，避免嵌套调用 #

把两个状态的更新逻辑分开，直接基于当前状态值进行操作（React在同一个事件循环内的状态更新是批量处理的，不用担心状态不同步）：

const handlePostLikeClick = () => {
  const newIsLiked = !isPostLiked;
  setIsPostLiked(newIsLiked);
  // 根据新的点赞状态更新计数
  setLikesCount(prevCount => newIsLiked ? prevCount + 1 : prevCount - 1);
};

方案2：添加props同步逻辑 #

为了保证本地状态和父组件传入的props始终一致，添加useEffect监听isLiked和likes的变化，同步更新本地状态：

useEffect(() => {
  setIsPostLiked(isLiked);
  setLikesCount(likes);
}, [isLiked, likes]);

这一步很关键，比如当其他地方修改了该帖子的点赞状态（比如另一个组件或者后端同步数据），你的组件能及时更新本地状态，避免计数偏差。

方案3：使用useReducer管理关联状态（推荐） #

如果点赞状态和计数是强关联的，用useReducer来集中管理这两个状态会让逻辑更清晰，也能彻底避免嵌套更新的问题：

// 定义状态和动作类型
type PostLikeState = {
  isPostLiked: boolean;
  likesCount: number;
};

type PostLikeAction = 
  | { type: 'TOGGLE_LIKE' }
  | { type: 'SYNC_FROM_PROPS', payload: { isLiked: boolean; likes: number } };

// 编写reducer函数
const postLikeReducer = (state: PostLikeState, action: PostLikeAction): PostLikeState => {
  switch (action.type) {
    case 'TOGGLE_LIKE':
      return {
        isPostLiked: !state.isPostLiked,
        likesCount: state.isPostLiked ? state.likesCount - 1 : state.likesCount + 1,
      };
    case 'SYNC_FROM_PROPS':
      return {
        isPostLiked: action.payload.isLiked,
        likesCount: action.payload.likes,
      };
    default:
      return state;
  }
};

// 在组件中使用useReducer
const Post = (props: PostProps) => {
  const {
    post: {
      content,
      author,
      postedDate,
      likes,
      comments,
      shares,
      isLiked,
      isBookmarked,
    },
  } = props;
  const [isPostBookmarked, setIsPostBookmarked] = useState(isBookmarked);
  const [likeState, dispatch] = useReducer(postLikeReducer, {
    isPostLiked: isLiked,
    likesCount: likes,
  });

  // 同步props变化
  useEffect(() => {
    dispatch({
      type: 'SYNC_FROM_PROPS',
      payload: { isLiked, likes }
    });
  }, [isLiked, likes]);

  const handlePostLikeClick = () => {
    dispatch({ type: 'TOGGLE_LIKE' });
  };

  return (
    <IconButton 
      icon={Heart} 
      label={likeState.likesCount} 
      filled={likeState.isPostLiked} 
      onClick={handlePostLikeClick} 
    />
  );
};

这样处理后，点赞和计数的逻辑完全绑定在一起，避免了状态不同步的问题，也让代码更容易维护和扩展。

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