I have a React frontend that communicates with a Flask backend, and for the most part it works fine. However, every time I make the first API request, the backend will send an error. After that, everything works fine. I suspect that there is some issue with my JavaScript not waiting for the API response properly, but I do not know exactly what is going on.

The code for my API request is listed below:

const handleSubmit= (e) => {
    e.preventDefault();
    const data = {"locationType": locationType, 
                  "numLocations": numLocations, 
                  "city": city};
    alert("Successfully submitted!");
    axios
      .post(url, data)
      .then(res => {
        setResult(JSON.stringify(res.data.resultsList));
        //console.log(result);
        addShops(result);
      })
      .catch(err => console.log(err));
      return JSON.stringify(result);
  }

In addition, the code for my POST response is listed here:

  def post(self):
    print(self)
    parser = reqparse.RequestParser()
    parser.add_argument('locationType', type=str)
    parser.add_argument('numLocations', type=int)
    parser.add_argument('city', type=str)

    args = parser.parse_args()
    location = args['locationType']
    num_locations = args['numLocations']
    city = args['city']

    if location:
      message = calculate(location, num_locations, city)
    else:
      message = "No Msg"
    
    return message

Please let me know if more information is needed to answer the question! Thank you!