'API Request from React frontend to Flask backend returns null on the first request only

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!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source