Javascript 如何在状态更新时中止Axios GET请求？

我使用不同的参数向单个表单提交的API发出多个异步GET请求，并在每个请求后更新状态

唯一的问题是在上一个请求尚未完成时提交表单。（即在前一个请求仍在加载时提交表单）。虽然我在表单提交的开头清空了状态，但状态将由以前的请求和新请求混合填充。这是由于上一个请求仍在运行

我尝试了axios取消，但由于状态不断更新，我不清楚如何使用componentDidUpdate（）或其他方法中止请求

<form onSubmit={searchFlights}>


searchFlights = async e => {
    e.preventDefault();
    this.setState({ flights: []});

   //Dummy Data: array of different parameters
    onDates = [1,2,3,4];

searchFlights=async e=>{
e.预防违约（）；
this.setState（{flights:[]}）；
//虚拟数据：不同参数的数组
onDates=[1,2,3,4]；

//每天获取结果
对于（设i=0；isetState是异步的，您将在下一个渲染周期中获得新状态。因此您做得不对。为什么不将axios结果推送到一个数组中，并从数组中设置循环后的飞行状态

<form onSubmit={searchFlights}>


searchFlights = async e => {
    e.preventDefault();
    const flights =[];

   //Dummy Data: array of different parameters
    onDates = [1,2,3,4];


searchFlights=async e=>{
e、 预防默认值（）；
常数飞行=[]；
//虚拟数据：不同参数的数组
onDates=[1,2,3,4]；

//每天获取结果
for（设i=0；i
它仍然无法解决问题。如果我提交一个表单，并在加载提交另一个表单时，它将显示第一个请求的结果，一旦第二个请求完成，它将显示结果。我需要一种方法来停止get请求，并在表单提交被破坏时启动一个新的请求。我明白了。如果你再提交一次吗？我不知道这方面。我假设第一次提交会通过，因为它已经在调用堆栈中了。
<form onSubmit={searchFlights}>


searchFlights = async e => {
    e.preventDefault();
    const flights =[];

   //Dummy Data: array of different parameters
    onDates = [1,2,3,4];

  // Fetch result for each Day
    for (let i = 0; i < onDates.length; i++) {
      let onDate = onDates[i];

      const res = await axios.get(
        `API/?date_from=${onDate}`
      );
      const flightResult = res.data.data[0];

    flights.push[flightResult]
    }
    this.setState({flights});