反應：重復調用組件 setState

Question

運行 React 代碼時出現此錯誤。

這里的代碼基於 React.org 提供的 教程

我是新手，所以我發現調試代碼並不容易。

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