CODEWITHSUNDEEP
javascriptreactjs
Romeo
Romeo

Reputation: 788

React: Component setState called repeatedly

I get this error when i run my react code.

The code here is based on the tutorial provided by React.org

I'm new to react so I i didn't find it easy debugging the code.

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.

This is caused by the handleClick method

Error:

handleClick
c:/dev/tic-tac-toe/src/index.js:38

  35 |  handleClick(i) {
  36 |    const squares = this.state.squares.slice();
  37 |    squares[i] = 'X';
> 38 |    this.setState({squares});
     | ^  39 |  }
  40 | 
  41 |  renderSquare(i) {

renderSquare
c:/dev/tic-tac-toe/src/index.js:45

  42 |   return (
  43 |     <Square 
  44 |       value={this.state.squares[i]}
> 45 |       onClick={this.handleClick(i)} 
     | ^  46 |     />
  47 |   );
  48 | }

Upvotes: 1

Views: 57

Answers (1)

Mindastic
Mindastic

Reputation: 4141

This is because you are setting the event handler and calling it at the same time. You could probably do:

return (
  43 |     <Square 
  44 |       value={this.state.squares[i]}
> 45 |       onClick={this.handleClick.bind(this, i)} 
     | ^  46 |     />
  47 |   );

Upvotes: 1

Related Questions