React点击点赞按钮无刷新更新计数器问题排查

问题根源 #

1. 状态更新逻辑错误：原handleLike中filter的用法完全偏离需求：
   • 使用like.foodId === foodId会仅保留当前菜品的点赞记录，丢弃其他所有数据，导致状态混乱
   • 改为like.foodId !== foodId会删除当前菜品的所有点赞，而非针对当前用户的取消操作
2. 未区分点赞/取消场景：没有判断用户是否已点赞，无法决定是添加还是删除点赞记录
3. API调用无异步处理：原likeFood未返回Promise，无法等待请求完成，且无错误回滚逻辑，易造成前后端数据不一致

修复步骤 #

1. 修正API函数，返回Promise #

让API请求可被异步等待，并抛出错误方便上层处理：

export default function likeFood(foodId, UserId) {
  return Axios.post(`${process.env.REACT_APP_APIENDPOINT}/Likes/like`, {
    foodId: foodId,
    UserId: UserId,
  }).catch(function (error) {
    console.log(error);
    throw error; // 抛出错误，让调用者处理失败场景
  });
}

2. 重写父组件handleLike方法 #

实现点赞/取消点赞的判断，正确更新状态，并处理API异常回滚：

handleLike = async (foodId, UserId) => {
  const oldLikes = this.state.Likes;
  // 判断当前用户是否已给该菜品点赞
  const hasLiked = oldLikes.some(like => like.foodId === foodId && like.UserId === UserId);

  let newLikes;
  if (hasLiked) {
    // 取消点赞：过滤掉当前用户对该菜品的点赞记录
    newLikes = oldLikes.filter(like => !(like.foodId === foodId && like.UserId === UserId));
  } else {
    // 点赞：添加新的点赞记录到数组
    newLikes = [...oldLikes, { foodId, UserId }];
  }

  try {
    // 先更新UI实现无刷新体验
    this.setState({ Likes: newLikes });
    // 等待API请求完成
    await likeFood(foodId, UserId);
  } catch (error) {
    // API失败时回滚状态，保证前后端一致
    this.setState({ Likes: oldLikes });
    console.error('点赞操作失败:', error);
  }
};

3. 优化子组件（可选） #

添加当前用户点赞状态判断，优化点赞数计算逻辑：

function Like({ foodId, UserId, Likes, handleLike }) {
  // 计算当前菜品的点赞数，用reduce比filter更高效
  const likeAmount = Likes.reduce((count, like) => 
    like.foodId === foodId ? count + 1 : count, 0
  );
  // 判断当前用户是否已点赞，用于切换图标样式
  const hasLiked = Likes.some(like => like.foodId === foodId && like.UserId === UserId);

  return (
    <div className="like-button">
      <BsHeart
        className={`like ${hasLiked ? 'liked' : ''}`}
        size={24}
        onClick={() => handleLike(foodId, UserId)}
      />
      <p>{likeAmount}</p>
    </div>
  );
}
export default Like;

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