Node服务重启后未触发点击 React自动通过Axios发送重复请求

问题根因 #

你遇到的现象核心诱因是Node接口未返回响应，导致前端请求一直处于pending（挂起）状态，浏览器在服务重启、连接断开后会自动重试未完成的请求，就出现了服务重启后自动收到相同数据的情况。 #

解决方案 #

按优先级依次排查修改：

1. 补全Node接口的响应逻辑
   你当前的PostCartAdd控制器只做了日志打印，没有给前端返回任何响应，请求会一直挂起直到超时，修改代码如下：

exports.PostCartAdd = (req, res, next) => {
    var cartItems = req.body.data.cartArray 
    console.log(cartItems);
    // 新增响应返回，关闭请求链路
    res.status(200).json({ code: 0, msg: '添加成功' })
}

修改后重启服务测试，90%以上的概率可以解决该问题。

2. 排查Axios重试配置
   如果你全局配置了axios-retry这类重试插件，或者自定义了响应拦截器在请求失败时自动重试，也会触发该现象。可以临时关闭重试逻辑，验证是不是重试机制导致的重复请求。

3. 排查前端事件绑定写法
   确认按钮的onClick事件绑定是否正确，避免直接执行函数的错误写法：

// 错误写法：组件渲染时就会直接执行BtnClickHandler发请求
<button onClick={BtnClickHandler(item)}>加入购物车</button>

// 正确写法：只有点击时才会触发
<button onClick={() => BtnClickHandler(item)}>加入购物车</button>

4. 通过浏览器网络面板定位请求来源
   打开F12开发者工具的「网络」标签，勾选「保留日志」选项，重启Node服务时观察是否有新的/cartAdd请求发起，查看请求的发起调用栈，就可以准确定位请求来源。

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