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

Question

我在单个表单提交时向 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];

// 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];

      this.setState({
        flights: [...this.state.flights, flightResult]
      }); //note the state is updating after each loop
   
    }

当在上一个请求运行时再次提交表单时，我希望它停止获取上一个请求，清除状态并仅获取新请求

Answer 1

setState 是异步的，您将在下一个渲染周期中获得新状态。所以你做错了。为什么不将 axios 结果推送到数组中，并在循环后从数组中设置航班的状态？

<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});