javascript - react : Component setState called repeatedly

Question

当我运行 react 代码时出现此错误。

这里的代码基于 tutorial由 React.org 提供

我是 react 新手，所以我发现调试代码并不容易。

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 |   );