React使用Axios向Flask后端发POST请求提交后跳转首页无日志问题

• e.preventDefault() 调用位置错误：浏览器的表单默认提交跳转行为是同步触发的，你将阻止默认行为的代码放在了Axios异步请求的.then回调中，请求还未返回结果时，表单已经完成默认提交、页面刷新，.then中的代码根本没有执行机会，这就是你看不到console.log、页面跳回首页的核心原因。
• Axios请求未携带表单数据：当前axios.post仅传入了后端接口地址，没有把表单填写的字段传给后端，后端无法获取提交的Variable等参数。
• 事件绑定逻辑不规范：仅给submit按钮绑定click事件，会漏掉用户按回车触发表单提交的场景，更合理的方式是直接给form元素绑定submit事件。
• 类组件方法存在this指向风险：如果后续事件函数中需要操作组件的state、props，未绑定this的普通方法会出现指向错误。

前端代码调整 #

1. 修正事件处理函数 #

将阻止默认行为的逻辑移到函数最开头，补充表单参数传递，类组件中建议提前绑定this指向：

// 类组件中建议在constructor中绑定this，或者直接用箭头函数定义方法
onSubmit = e => {
  // 第一行就阻止默认表单跳转
  e.preventDefault()
  // 构造表单数据，匹配后端request.form的取值逻辑
  const formData = new FormData(document.getElementById('patient-form'))
  axios.post('http://localhost:5000/post', formData)
    .then(res => {
      console.log(res)
      // 此处可加提交成功后的逻辑，比如清空表单、提示成功
    })
    .catch(error => {
      console.log(error)
    })
}

2. 修改表单绑定逻辑 #

移除submit按钮的onClick绑定，改为给form元素绑定onSubmit事件：

<div className="users-information">
  <form 
    className="patient-form" 
    id="patient-form" 
    name="patient-form"
    onSubmit={this.onSubmit}
  >
    <input type="text" name="Variable" id="Variable" />
    <label>
      Address: 
      <input name="Address" id="users-address" />
    </label>
    <label>
      City: 
      <input name="City" id="users-city" />
    </label>
    <label>
      State: 
      <input name="State" id="users-state" />
    </label>
    <label >
      Zip: 
      <input name="Zip" id="users-zip" />
    </label>
    <input type='submit' value='Submit' />     
  </form>
</div>

后端适配（可选） #

如果后续需要传递JSON格式的参数，可将后端取值逻辑改为request.json.get("Variable","")，前端直接传JS对象即可，不需要构造FormData。

内容的提问来源于stack exchange，提问作者Justin Philip Fulkerson