超出最大更新深度。 當組件在componentWillUpdate或componentDidUpdate中重復調用setState時，可能會發生這種情況

Question

我正在制作康威的生命游戲反應項目，它工作得很好但是當我添加最后幾個按鈕來清除電路板和其他一些功能反應給了我這個錯誤

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. 

從代碼片段開始，它一直在向我展示clear（）函數似乎是這里的問題，但我認為我沒有在render（）中設置狀態以觸發無限循環。 以下是clear和componentDidMount所有代碼，我的app中沒有componentWillUpdate或componentDidUpdate 。

主類中的clear（）和Play函數

編輯1：它告訴我play（）函數中的setState有問題，但是，我總是以這種方式實現播放功能，它從一開始就一直在工作....

clear = ()=>{
    var g = Array(this.rows).fill().map(()=> Array(this.cols).fill(false));

    this.setState({
        generations:0,
        fullGrid: g
    })
}

.....

play = () => {

    let g1 = this.state.fullGrid;
    let g2 = arrayClone(this.state.fullGrid);

    for (let i = 0; i < this.rows; i++) {
        for (let j = 0; j < this.cols; j++) {
            let count = 0;

            if (i > 0)
                if (g1[i - 1][j]) count++;
            if (i > 0 && j > 0)
                if (g1[i - 1][j - 1]) count++;
            if (i > 0 && j < this.cols - 1)
                if (g1[i - 1][j + 1]) count++;
            if (j < this.cols - 1)
                if (g1[i][j + 1]) count++;
            if (j > 0)
                if (g1[i][j - 1]) count++;
            if (i < this.rows - 1)
                if (g1[i + 1][j]) count++;
            if (i < this.rows - 1 && j > 0)
                if (g1[i + 1][j - 1]) count++;
            if (i < this.rows - 1 && this.cols - 1)
                if (g1[i + 1][j + 1]) count++;
            if (g1[i][j] && (count < 2 || count > 3)) g2[i][j] = false;
            if (!g1[i][j] && count === 3) g2[i][j] = true;
        }
    }

    this.setState({
        fullGrid: g2,
        generations: this.state.generations + 1
    });

}


playButton = ()=>{
    clearInterval(this.intervalId);
    this.intervalId = setInterval(this.play, this.speed);
}

pauseButton = ()=>{
    clearInterval(this.intervalId);
}

slow = ()=>{
    this.speed = 1000;
    this.playButton();
}

fast = ()=>{
    this.speed = 100;
    this.playButton();
}

clear = ()=>{
    var g = Array(this.rows).fill().map(()=> Array(this.cols).fill(false))

    this.setState({
        generations:0,
        fullGrid: g
    })
}

按鈕類

class Buttons extends React.Component{

handleSelect = (evt) =>{
    this.props.gridSize(evt);
}

render(){
    return (
        <div className="center">
            <ButtonToolbar>
                <button className='btn btn-info'  onClick={this.props.playButton}>
                    PLAY
                </button>
                <button className='btn btn-info'  onClick={this.props.pauseButton}>
                    PAUSE
                </button>
                <button className='btn btn-info'  onClick={this.props.clear}>
                    CLEAR
                </button>
                <button className='btn btn-info'  onClick={this.props.slow}>
                    SLOW
                </button>
                <button className='btn btn-info'  onClick={this.props.fast}>
                    FAST
                </button>
                <button className='btn btn-info'  onClick={this.props.seed}>
                    SEED
                </button>
                <DropdownButton
                    title="Grid Size"
                    id="size-menu"
                    onSelect={this.handleSelect}
                >
                    <MenuItem eventKey="1">20x10</MenuItem>
                    <MenuItem eventKey="2">50x30</MenuItem>
                    <MenuItem eventKey="3">70x50</MenuItem>
                </DropdownButton>
            </ButtonToolbar>
        </div>
    )
}

}

Answer 1

你的onClick處理程序被連續調用。 將它們更改為返回您要調用的函數的函數，這應該可以解決您的問題。

例：

<button className='btn btn-info'  onClick={() => this.props.playButton}>
    PLAY
</button>