Javascript 点击submit按钮后，调用API，问题被触发2次 import React，{Component}来自'React'； 从“axios”导入axios； 类用户扩展组件{ handleSubmit=（e，firstName，lastName）=>{ e、 停止传播（）； e、 预防默认值（） const start=Date.now（） 轴心柱http://localhost:4000/api/user', { 参数：{ 名字， 姓氏 } }) .然后（功能（响应）{ 控制台日志（响应）； }) .catch（函数（错误）{ console.log（错误）； }); } render（）{ 返回( this.handleSubmit（e，firstname，lastname）}>submit )} }

我使用nodejs创建API，名为

/user

，它是post方法

我尝试使用reactjs使用它，当按下按钮submit并检查网络中发生的情况时，它会调用2次，如何修复此行为？

从“React”导入React；
从“axios”导入axios；
类用户扩展了React.Component{
handleSubmit=（e，firstName，lastName）=>{
e、 预防默认值（）；
const start=Date.now（）；
console.log（启动）；
axios
.post（“http://localhost:4000/api/user", {
参数：{
名字，
姓氏
}
})
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
};
render（）{
返回(
this.handleSubmit（e，“hello”，“world”）}>
提交
);
}
}
导出默认用户；

---

忘记导入axios。工作正常祝你有愉快的一天，我想你可以试试这个：

import React from "react";
import axios from "axios";

class User extends React.Component {
  handleSubmit = (e, firstName, lastName) => {
    e.preventDefault();
    const start = Date.now();
    console.log(start);
    axios
      .post("http://localhost:4000/api/user", {
        params: {
          firstName,
          lastName
        }
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  };
  render() {
    return (
      <button onClick={e => this.handleSubmit(e, "hello", "world")}>
        submit
      </button>
    );
  }
}

export default User;

类用户扩展组件{
建造师（道具）{
超级（道具）
这个州={
发送数据：false
}
this.toggleSendingData=this.toggleSendingData.bind（this）；
}
切换发送数据（）{
this.setState（{sendingData:！this.state.sendingData}）
}
handleSubmit=（e，firstName，lastName）=>{
e、 停止传播（）；
e、 预防默认值（）；
const start=Date.now（）；
if（this.state.sendingData）返回；
this.toggleSendingData（）
axios
.post（“http://localhost:4000/api/user", {
参数：{
名字，
姓，
},
})
.然后（功能（响应）{
控制台日志（响应）；
this.toggleSendingData（）
})
.catch（函数（错误）{
console.log（错误）；
this.toggleSendingData（）
});
};
render（）{
返回(
this.handleSubmit（e，firstname，lastname）}>
提交
);
}
}

---

可能您希望在发送数据时显示加载程序，因此控制该加载程序的状态以及用户是否可以发送请求是一种很好的方法，我希望能帮助您

欢迎使用StackOverflow，请提供一个可生成的示例：，这样我们就可以检查它是否真的调用了两次，而不是本地错误。可能第一个请求是一个选项请求。我看不到您发布的代码中有任何地方会导致单击处理程序被调用两次，除非按钮被按下两次。@user7836115为什么要对yerself进行注释？为什么需要

e.stopPropagation（）；&e、 preventDefault（）

？它只是一个带有文本

Submit

的按钮，不是真正的提交按钮。thx对于您的响应，axios是导入的，只是我忘了在这里添加它，正如我所说的，问题是当我按下按钮时，它会被调用或触发2次2次2次2次它不会触发2次1次单击按钮它触发了handleSubmit仅一次。你可以看到这张图片，它是如何调用2次的

import React from "react";
import axios from "axios";

class User extends React.Component {
  handleSubmit = (e, firstName, lastName) => {
    e.preventDefault();
    const start = Date.now();
    console.log(start);
    axios
      .post("http://localhost:4000/api/user", {
        params: {
          firstName,
          lastName
        }
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  };
  render() {
    return (
      <button onClick={e => this.handleSubmit(e, "hello", "world")}>
        submit
      </button>
    );
  }
}

export default User;

   class User extends Component {
    constructor(props){
        super(props)
        this.state={
            sendingData:false
        }
        this.toggleSendingData= this.toggleSendingData.bind(this);
    }
    toggleSendingData(){
        this.setState({sendingData: !this.state.sendingData})
    }
  handleSubmit = (e, firstName, lastName) => {
    e.stopPropagation();
    e.preventDefault();
    const start = Date.now();
    if(this.state.sendingData) return;
    this.toggleSendingData()
    axios
      .post("http://localhost:4000/api/user", {
        params: {
          firstName,
          lastName,
        },
      })
      .then(function (response) {
        console.log(response);
        this.toggleSendingData()
      })
      .catch(function (error) {
        console.log(error);
        this.toggleSendingData()
      });
  };
  render() {
    return (
      <Button onClick={(e) => this.handleSubmit(e, firstname, lastname)}>
        submit
      </Button>
    );
  }
}