Home / Questions / 434224
Accepted
Lucas Tomic
Asked: 2022-03-10 14:09:31 +0800 CST 2022-03-10 14:09:31 +0800 CST

My Fetch query generates an error that is repeated many times

  • 772

I do a Fetch query to the Json Placeholder page, and at first it works perfectly, but after a while (it doesn't always take the same time, sometimes it's a few minutes sometimes seconds) the same errors start to repeat in the console many times (sometimes repeating more than 10000 times), this causes the page to freeze and you have to close the tab.

Mistakes:

Console

Function that performs the query:

jsonPlaceHolder = async() =>{
  let cons = await fetch('https://jsonplaceholder.typicode.com/posts')// Consulta de jsonplaceholder
  cons = await cons.json() // Transformacion de JSON a JS
  this.setState({posts:cons}) //Guarda la array de Posts en el stat
}

I do this in the main component, App.js.

javascript

1 Answers

  1. Best Answer

    I don't know where you App.js're calling that this.setState({posts:cons}), but don't forget that calling setStateon renderit can cause React to do infinite renders. Perhaps in your case that is causing the API to be consumed indefinitely.

    So it's best to update states within lifecycle functions like componentDidMount().

    That's better explained here: loop in react on update state

    • 1