表单提交 ReactJS 上的“类型错误：尝试获取资源时出现网络错误”答案

【问题标题】：'TypeError: NetworkError when attempting to fetch resource' on form submit ReactJS表单提交 ReactJS 上的“类型错误：尝试获取资源时出现网络错误”
【发布时间】：2020-04-10 19:12:55
【问题描述】：

我尝试在启用跨域的情况下从我的 API 中获取一些数据，但出现此错误。
使用他们提供的示例与JSONPlaceholder（用于测试的在线 REST API）相同：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

两个请求（JSONPlaceholder 和我的 API）都可以使用 Insomnia（一个 REST 客户端）正常工作，所以我猜测问题出在我的 React 应用程序 (16.13.1) 中。

编辑

经过一些测试，似乎只有在从<form> 调用 fetch 函数时才会出现错误，这里有一些细节：

handleSubmit = () => {
   fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
}

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

谢谢。

【问题讨论】：

你能提供你得到的完整错误吗？还是只是“TypeError：NetworkError”？
是的，仅此而已，没有细节。
你没有以任何方式发现你的错误。尝试添加 .catch(err => console.error(err)) 以便将完整错误打印到控制台，然后将输出添加到您的问题中。它可能会增加一些清晰度。
@Phoenix1355，catch返回同样的信息，已经试过了。
您是否尝试过阻止 default()？ handleSubmit=(e)=>{e.preventDefault() ...等}

标签： javascript reactjs

【解决方案1】：

我设法重现了您的错误。当页面重新加载时，网络请求似乎停止了。您可以添加一个简单的event.preventDefault 来停止重新加载，直到fetch 完成，然后重新加载页面。

handleSubmit = (event) => {
  event.preventDefault()
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((json) => {
      console.log(json)
      window.location.reload()
    })
}

当然，您也可以完全不重新加载页面以获得更好的用户体验:)

【讨论】：

确实，reload 中断了请求，谢谢！
@adxl 没问题，很容易错过 :)
@AdamJeliński 这也对我有用！谢谢你。但是，现在好像没有发送表单，有解决方法吗？
@pp182 event.preventDefault() 专门阻止表单提交，以使fetch 成功。我认为您可以用event.target.submit() 替换window.location.reload()（它只是重新加载页面而不提交），以便首先提出请求，然后提交表单。
@AdamJeliński 再次感谢！如果它不是太麻烦你介意看我的线程吗？我没有在我的代码中使用 window.location.reload() 所以我不确定在哪里放置 submit() 函数。 stackoverflow.com/questions/65382736/…