How to send POST and refresh page with React?

I have written a simple form that sends a post request with data to the server. On click of the submit button, I want to clear the form, so I create a function that refreshes the page. The function works correctly, but now the data is not sent to the server.

import React, {Component} from "react";
import axios from "axios";

class PostForm extends Component {

constructor(props) {
    super(props);
    this.state = {
        id: '',
        name: '',
        surname: '',
        country: ''
    }
}

changeHandler = e => {
    this.setState({[e.target.name]: e.target.value});
}

clearFunc = () => {
    window.location.reload(false);
}

submitHandler = e => {
    e.preventDefault();
    console.log(this.state);
    axios.post('http://localhost:8080/human/add/', this.state)
        .then(response => {
            console.log(response)
        })
        .catch(error => {
            console.log(error)
        });
}


render() {
    const {id, name, surname, country} = this.state;
    return (
        <div>
            <form id="input-form" onSubmit={() => {
                this.submitHandler();
                this.clearFunc()
            }}>
                <div>
                    <input type="number" name="id" value={id} onChange={this.changeHandler}/>
                </div>
                <div>
                    <input type="text" name="name" value={name} onChange={this.changeHandler}/>
                </div>
                <div>
                    <input type="text" name="surname" value={surname} onChange={this.changeHandler}/>
                </div>
                <div>
                    <input type="text" name="country" value={country} onChange={this.changeHandler}/>
                </div>
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}
}

export default PostForm;

>Solution :

I would move this line this.clearFunc() inside submitHandler, in that then block, like so:

submitHandler = (e) => {
  e.preventDefault();
  console.log(this.state);
  axios
    .post("http://localhost:8080/human/add/", this.state)
    .then((response) => {
      console.log(response);
      this.clearFunc();
    })
    .catch((error) => {
      console.log(error);
    });
};

Also, if it’s just to empty the form, there is no need to refresh the page, you could simply do so:

clearFunc = () => {
  this.setState({
    id: "",
    name: "",
    surname: "",
    country: "",
  });
};