React表单提交提示Cannot Post 提交处理程序运行异常问题求助

算力阿峰

2026-10-13

问题排查方案

1. 核心问题修复：嵌套表单冲突

你的代码中存在两层嵌套的<form>标签：

外层form绑定了onSubmit={this.SubmitHandler}，做了preventDefault处理
内层form没有绑定任何提交事件，且提交按钮<input type="submit">是放在内层form内部的

点击提交按钮时，会优先触发内层form的默认提交行为，内层没有阻止默认逻辑，直接发起了action为空的POST请求，就出现了Cannot Post提示。
修复方案：删除多余的内层<form>标签，只保留外层绑定了SubmitHandler的form即可。

2. 其他问题排查项

this指向问题

你定义的importErg是普通函数，虽然当前在箭头函数SubmitHandler中调用暂时不会出问题，但后续调整调用方式很容易出现this指向丢失、取不到state的问题。
修复方案：将importErg改成箭头函数：

importErg = () => {
  fetch("http://localhost:3000/ergazomenoi", {
    method: "POST",
    body: JSON.stringify({
      "onoma": this.state.onoma,
      "epitheto": this.state.epitheto
    }),
    headers: {
      "Authorization": "Bearer ",
      "Content-Type": "application/json; charset=utf-8"
    },
    credentials: "same-origin"
  })
}

fetch请求无错误捕获

当前fetch没有加.then和.catch处理，就算接口返回异常也无法感知。可以加上日志打印排查请求是否正常发起、返回是否符合预期：

importErg = () => {
  fetch("http://localhost:3000/ergazomenoi", {
    // 原有配置保持不变
  })
  .then(res => {
    console.log('响应状态：', res.status)
    return res.json()
  })
  .then(data => console.log('接口返回数据：', data))
  .catch(err => console.error('请求报错：', err))
}