ReactJS表单提交时触发TypeError: NetworkError资源获取错误求助

这个问题的核心原因其实很直观——表单的默认提交行为会直接中断你的fetch请求！当你点击submit按钮时，浏览器会自动触发表单提交逻辑，页面会立刻刷新，这就导致还在进行中的fetch请求被强制终止，从而抛出这个网络错误。而你用Insomnia或者在form外调用fetch时能正常请求，正是因为没有触发表单的默认刷新行为。

解决方案：阻止表单的默认提交行为 #

只需要在handleSubmit函数中接收事件参数，调用preventDefault()方法就能阻止页面刷新，让fetch请求顺利完成。

修改后的代码如下：

JavaScript部分

handleSubmit = (e) => {
  // 阻止表单默认提交刷新行为
  e.preventDefault();
  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => console.log(json))
}

HTML部分（无需改动）

<form onSubmit={this.handleSubmit} >
  <button type="submit">FETCH</button>
</form>

快速验证小技巧 #

你可以在handleSubmit开头加一句console.log('请求开始')，就能明显看到：没加e.preventDefault()时，日志刚打印出来页面就刷新了；加上之后，页面不会刷新，fetch请求也能正常返回数据。

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