博客浏览量点击触发后无法正确写入数据库，求技术排查建议

前端问题修复 #

• 解决事件冲突与请求中断：
  点击"Read more"时，内层<a>的点击事件会冒泡到外层<div>触发导航跳转，导致统计请求可能未完成就被中断。同时需处理<a>标签的默认行为，修改代码如下：

  const getClickCount = async (idx, e) => {
    e.stopPropagation(); // 阻止事件冒泡到外层div
    e.preventDefault(); // 阻止<a>标签默认行为
    console.log("Popular blog item::"+idx);
    const params = { id: idx };
    try {            
      await axios.get(`${appUrl}/service/incrementblogviews`, {params});
      // 请求完成后再执行导航
      navigate("popularBlogDetails", {
        state: { id: idx, blogdetails, views, createdAt }
      });
    } catch (e) {
      console.log(e);
    }
  }
  
  // 调用时传入event对象
  <a onClick={(e) => getClickCount(id, e)} className='readmoreLink'>
    Read more →
  </a>
  

  同时移除外层<div>的onClick导航逻辑，统一放在getClickCount中避免冲突，还要删除外层无意义的<a>标签（无href属性会干扰事件处理）。

后端代码修复 #

• 修正findOne参数格式：
  当前findOne的参数拆分为两个对象，导致where条件不生效，无法定位目标博客。修改为：

  const dataCount = await BlogModel.findOne({ 
    attributes: ['views'], 
    where: { id: blogId } 
  });
  

• 增加空值判断：
  若找不到对应博客，dataCount会为null，直接访问dataCount.views会报错，需添加前置判断：

  if (!dataCount) {
    return res.status(404).json({ message: "博客不存在" });
  }
  const incrementCount = dataCount.views + 1;
  

• 改用原子更新避免并发问题：
  先查询再更新的方式在高并发场景下会丢失计数，推荐直接用数据库原子操作完成自增：

  const updateBlogviews = await BlogModel.increment('views', { by: 1, where: { id: blogId } });
  

调试建议 #

• 在前端getClickCount的catch块打印完整错误信息，确认请求是否发送成功、后端返回状态码。
• 在后端接口中添加日志，打印blogId、dataCount、updateBlogviews等关键变量，验证数据处理流程是否正确。

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