Javascript 父状态不更新子组件

情况：

当我通过单击开始启动模拟时，我的清除按钮应该停止它。但当我点击Clear时，什么也没发生。为什么以及如何修复它

---

代码：

Game.jsx

var Game = createReactClass ({

    getInitialState() {
        return {
            start: false
        }
    },

    handleStartClick() {
        this.setState({
            start: true
        })
    },

    handleClearClick() {
        this.setState({
            start: false
        })
    },

    render() {
        return (
            <div>
                <h1>React.js Game of Life</h1>
                <div className="buttons"> 
                    <button className="btn btn-danger" onClick={this.handleClearClick}>Clear</button>
                    <button className="btn btn-success" onClick={this.handleStartClick}>Start</button>
                </div>
                <Board start={this.state.start}/>
            </div>
        );
    }

})

---

你应该将你的进化间隔保存为state，这样当新道具进来取消它时，你可以访问它

if（nextrops.start&&this.state.start==false）{
让evolution=setInterval（（）=>{
这就是生活（下一步）；
log（“垂死：+this.state.垂死”）；
这是我的国家({
所选：！this.state.deing
});
}, 500);
这是我的国家({
开始：是的，
进化
})
}
否则{
clearInterval（这个状态，进化）；
这是我的国家({
开始：错误
})
}

我的清除按钮应该停止它

它停止了吗？您在控制台中是否有任何错误？@Panther没有错误，不会停止它。您在

组件中重新定义
进化
将接收道具

。保持原样。进化。完美，成功了！看来你很了解reactsj，你能不能也看看这个问题太好了！当然，我会看一看。我在一分钟前用我在代码方面的最新进展更新了这个问题，这样你就不会看旧代码了。

var Board = createReactClass ({

    getInitialState() {
        var cellArray = [];
        for (var y = 0; y < 40; y++) {
            var cells = [];
            for (var x = 0; x < 40; x++) {
                cells.push(<Cell key={x + y*40} id = {x + y*40} row = {x} column={y} />);
            }
            cellArray.push(cells);
        }
        return {
            array: cellArray
        }
    },

    render() {

        var rows = [];
        for (var y = 0; y < 40; y++) {
            var cells = [];
            for (var x = 0; x < 40; x++) {
                cells.push(<Cell start= {this.props.start} array={this.state.array} key={x + y*40} id = {x + y*40} row = {x} column={y} />);
            }
            rows.push(<tr key={y}>{cells}</tr>);
        }
        return <table><tbody>{rows}</tbody></table>;

    }

})

componentWillReceiveProps(nextProps) {

        nextProps.array[nextProps.id] = this;

        var evolution;

        if(nextProps.start && this.state.started == false) {
            evolution = setInterval(() => { 
                this.life(nextProps);
                console.log("DYING:"+this.state.dying);
                this.setState({
                    selected: !this.state.dying
                });
            }, 500);
            this.setState({
                started: true
            })
        } 
        else {
            clearInterval(evolution);
            this.setState({
                started: false
            })
        }
    },