javascript - 'TypeError: NetworkError when attempting to fetch resource' on form submit ReactJS - Stack Overflow

admin管理员组

文章数量:1336660

I tried to fetch some data from my API with Cross-Origin enabled but got this error.
Same thing with JSONPlaceholder (an online REST API for testing) using an example they provide :

fetch('')
  .then(response => response.json())
  .then(json => console.log(json))

Both requests (JSONPlaceholder and my API) work fine using Insomnia (a REST client), so my guess is that the problem is in my React application (16.13.1).

EDIT

After some tests, it seems that the error only occurs when calling the fetch function from a <form>, here are some details :

handleSubmit = () => {
   fetch('')
  .then(response => response.json())
  .then(json => console.log(json))
}

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

Thanks.

I tried to fetch some data from my API with Cross-Origin enabled but got this error.
Same thing with JSONPlaceholder (an online REST API for testing) using an example they provide :

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

Both requests (JSONPlaceholder and my API) work fine using Insomnia (a REST client), so my guess is that the problem is in my React application (16.13.1).

EDIT

After some tests, it seems that the error only occurs when calling the fetch function from a <form>, here are some details :

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

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

Thanks.

• javascript
• reactjs

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 9, 2020 at 11:46 adxladxl 89911 gold badge1010 silver badges2121 bronze badges 6

• 1 could you provide the full error you got? Or was it just the "TypeError: NetworkError"? – Adam Jeliński Commented Apr 9, 2020 at 11:49
• Yes that's all, no details. – adxl Commented Apr 9, 2020 at 11:51
• 1 You're not catching your error in any way. Try adding .catch(err => console.error(err)) so it prints the full error to the console, and then add the output to your question. It might add some more clarity. – Phoenix1355 Commented Apr 9, 2020 at 12:01
• 3 have you tried to prevent the default()? handleSubmit=(e)=>{e.preventDefault() ...etc} – DcoderZ Commented Apr 9, 2020 at 12:07
• 1 @DcoderZ, yes that was the problem, thanks! – adxl Commented Apr 9, 2020 at 12:15

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

I managed the reproduce your error. It seems like the network request is stopped when the page reloads. You could add a simple event.preventDefault to stop the reload until the fetch finishes and then reload the page.

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

And of course you can also not reload the page at all for a better user experience :)

本文标签：