如何在React中实现发送POST请求后刷新页面？解决数据未提交问题

你遇到的核心问题是页面刷新中断了异步的POST请求。axios.post是异步操作，需要一点时间和服务器完成通信，但你在调用submitHandler之后立刻执行window.location.reload，页面会马上刷新，直接终止还在进行的请求，导致数据根本没发送出去。

另外，你的onSubmit回调里没有把事件对象传给submitHandler，导致e.preventDefault()根本没生效——不过就算生效了，后续的刷新操作还是会毁掉请求。

别用页面刷新来清空表单，React是状态驱动的，直接修改组件的state来清空输入框才是正确的做法，这样既不会中断请求，也更符合React的设计思路。

修改后的代码 #

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

  // 改成通过更新state清空表单，而不是刷新页面
  clearFunc = () => {
    this.setState({
      id: '',
      name: '',
      surname: '',
      country: ''
    });
  }

  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);
        // 如果请求失败，可以选择不清空，或者提示用户
      });
  }

  render() {
    const {id, name, surname, country} = this.state;
    return (
      <div>
        {/* 直接把submitHandler绑定到onSubmit，不用额外包装，确保事件能传进去 */}
        <form id="input-form" onSubmit={this.submitHandler}>
          <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;

关键改动点 #

• 移除页面刷新：把clearFunc改成通过setState重置所有表单字段的状态，这样页面不会刷新，只是更新输入框的值。
• 正确传递事件：onSubmit直接绑定this.submitHandler，让e.preventDefault()能正常工作，阻止表单默认的提交刷新行为。
• 请求成功后清空：把clearFunc的调用放在axios.post的then回调里——这样只有当数据成功发送到服务器之后，才清空表单。如果请求失败，表单还会保留用户输入，方便用户修改后重新提交。

这样修改之后，你的POST请求就能正常发送，表单也能在请求成功后清空，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Spam Garbage