Question

运行我的React代码时出现此错误。

此处的代码基于React.org提供的tutorial

我是新来的反应者，所以我发现调试代码并不容易。

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.

这是由handleClick方法引起的

错误：

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 | }

Answer 1

这是因为您正在设置事件处理程序并同时调用它。您可能可以这样做：

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

反应：组件setState反复调用

1 个答案: