React中如何通过onClick点击事件实现点赞数实时递增更新

问题根因 #

你当前的代码存在两个核心问题：

1. 点击事件绑定错误：onClick={LikeComment(comment_id, user_id)}的写法会在组件渲染时直接执行LikeComment方法，而非点击按钮时才触发，正确的绑定方式需要包裹为回调函数。
2. 视图无响应是因为你没有把点赞数据存入React的响应式状态，直接使用接口拉取的静态数据，数据变更时React无法感知到需要重渲染页面。你之前尝试的三元判断写法逻辑完全不成立，LikeComment作为函数本身是恒真的布尔值，会导致页面渲染时就直接加1，和点击行为没有关联。

解决方案（推荐乐观更新实现，用户体验更好） #

步骤1：声明响应式状态

// 把初始拉取的comment_likes存入state
const [likes, setLikes] = useState(comment_likes);
// 防止用户重复点击提交多次请求
const [hasLiked, setHasLiked] = useState(false);

步骤2：改造LikeComment方法

const LikeComment = async (comment_id, user_id) => {
  if (hasLiked) return;
  // 先更新本地状态实现立刻+1的效果，不用等接口返回
  setLikes(prev => [...prev, {}]);
  setHasLiked(true);
  try {
    // 这里放你原有向数据库提交点赞请求的逻辑
    await 你的点赞请求方法(comment_id, user_id);
  } catch (err) {
    // 接口请求失败就回滚状态，保证数据准确性
    setLikes(prev => prev.slice(0, -1));
    setHasLiked(false);
    console.error('点赞失败，请重试', err);
  }
}

步骤3：修正模板绑定

<button className="btn" onClick={() => LikeComment(comment_id, user_id)}>
  <div className="text">
    <i className="fas fa-thumbs-up"></i>
    <p>{likes.length}</p>
  </div>
</button>

如果不需要乐观更新，只要把setLikes的逻辑移到接口请求成功的回调里即可，点击后会等接口返回成功才更新数值。

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