0

I'm trying to send a request to the function onGridRowsUpdated with my parameters but it is throwing me the error of

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I wonder what is the issue because I'm calling the parameters correctly.

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        console.log(fromRow, toRow, updated)
        rows[i] = { ...rows[i], ...updated };
      }
      this.definedColumn();
      return { rows };
    });
  };

render() {
    this.onGridRowsUpdated(1, 1, {D: '26'});
}
tutobello
  • 3
  • 2

1 Answers1

0

As you should know that whenever component state changes re-rendering happens.

As I can see in your code, you are calling a function to render some table and in that, you are calling setState() method which is asynchronous in nature. That's the reason re-rendering happening and causing Maximum update depth exceeded

render should always remain pure. It's a very bad practice to do side-effects things in there, and calling setState is a big red flag;

For more reference check this out - setState() method

Calling setState() inside render - Calling setState() in React from render method

akhtarvahid
  • 9,445
  • 2
  • 26
  • 29
  • What can I do to avoid this trap and at the same time update my function? – tutobello Apr 18 '21 at 06:08
  • @tutobello I don't know what are you trying to do but would suggest you call that setState() things from any click function or componentDidMount() to avoid such cases. – akhtarvahid Apr 18 '21 at 06:14