React组件按钮点击触发API两次调用问题排查求助

兄弟，这个问题确实挺诡异的——前端控制台只打了一次log、开发者工具也只看到一次XHR请求，但数据库却多了两条记录，我来帮你拆解下最可能的原因和排查步骤：

一、优先排查后端API接口（概率最高） #

因为前端只发起了一次请求，但数据库出现两条记录，90%以上的概率是后端接口本身的问题，你可以先做这个验证：

• 用Postman、curl或者浏览器直接调用你的API：POST http://localhost/util/index.php/api/record，参数传{name: 'test'}
• 如果这次调用后数据库还是新增两条记录，那完全不用查前端了，直接去看后端代码：
  • 检查index.php/api/record接口里有没有重复执行的插入逻辑，比如是不是写了两次INSERT INTO ...语句？
  • 有没有后端中间件/服务器（比如Nginx、Apache）的配置问题，导致请求被重复转发？
  • 接口里有没有触发了其他会执行插入的钩子、回调函数？

二、前端侧的排查方向 #

如果后端单独调用是正常的（一次请求对应一条记录），再来看前端的可能问题：

1. 组件被重复渲染/挂载 #

React在开发环境的Strict Mode下，会刻意让组件渲染两次（用来检测副作用），不过正常情况下事件不会被触发两次，但可以先确认：

• 在你的类组件里加个日志，比如在render()方法里写：

  render() {
    console.log('组件正在渲染');
    return (
      // 你的组件内容
      <button type="button" onClick={ this.onSubmitForm }>Save</button>
    )
  }
  

  如果控制台打印了两次“组件正在渲染”，那说明组件被渲染了两次，检查父组件是不是不小心写了两次<YourComponent />，或者有没有其他逻辑导致组件重复挂载。

2. Axios拦截器导致重复请求 #

检查你有没有全局配置Axios拦截器，比如：

// 有没有类似这样的代码？
axios.interceptors.request.use(config => {
  // 会不会在这里不小心又发起了一次请求？
  return config;
});

如果拦截器里有重复调用axios.post的逻辑，就会导致一次触发发两次请求。

3. 额外的事件绑定 #

检查有没有在其他地方给这个按钮绑定了点击事件，比如在componentDidMount里用原生JS加了监听：

componentDidMount() {
  // 比如这样的代码会导致两次事件触发
  document.querySelector('button').addEventListener('click', this.onSubmitForm);
}

三、给你的代码提个小优化 #

虽然不一定是问题根源，但可以先完善下请求逻辑，避免潜在的异步问题：

onSubmitForm = async (e) => {
  e.preventDefault(); // 如果按钮在<form>标签内，一定要加这个阻止默认提交行为
  try {
    const response = await axios.post('http://localhost/util/index.php/api/record', {name: 'test'} );
    console.log('请求响应：', response);
  } catch (error) {
    console.error('请求出错：', error);
  }
};

先从后端API的验证开始排查，这大概率是问题所在！

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