Question

状况：

我创建几个点并单击“开始”。错误弹出一百万次（逻辑，因为有100个单元格和一个setInterval）。

错误：

Uncaught TypeError: Cannot read property 'state' of undefined
    at Object.isAlive (main.js:21496)
    at Object.life (main.js:21533)
    at setInterval (main.js:21508)

问题：

导致错误的原因是什么？如何解决？

生命游戏：

CODE：

var Cell = createReactClass ({

getInitialState() {
    return {
        selected : false,
        dying: true,
        started: false,
    }
},

componentWillReceiveProps(nextProps) {

    nextProps.array[nextProps.column][nextProps.row] = this;

    var evolution;

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

isAlive(e) {
    return (e.state.selected);
},

life(nextProps) {

    var array = nextProps.array;

    var neighbours = 0;

    var i = this.props.column;
    var j = this.props.row;
    var x = 40;
    var y = 40;

    if(this.isInBoard(i, j, x, y)) {
        if(this.isInBoard(i + 1, j, x, y)) {
            if (this.isAlive(array[i+1][j])) {
                neighbours++;
            }
        }
        if(this.isInBoard(i - 1, j, x, y)) {
            if (this.isAlive(array[i-1][j])) {
                neighbours++;
            }
        }
        if(this.isInBoard(i, j + 1, x, y)) {
            if (this.isAlive(array[i][j+1])) {
                neighbours++;
            }
        }
        if(this.isInBoard(i, j - 1, x, y)) {
            if (this.isAlive(array[i][j-1])) {
                neighbours++;
            }
        }
        if(this.isInBoard(i - 1, j + 1, x, y)) {
            if (this.isAlive(array[i-1][j+1])) {
                neighbours++;
            }
        }
        if(this.isInBoard(i + 1, j - 1, x, y)) {
            if (this.isAlive(array[i+1][j-1])) {
                neighbours++;
            }
        }
        if(this.isInBoard(i + 1, j + 1, x, y)) {
            if (this.isAlive(array[i+1][j+1])) {
                neighbours++;
            }
        }
        if(this.isInBoard(i - 1, j - 1, x, y)) {
            if (this.isAlive(array[i-1][j-1])) {
                neighbours++;
            }
        }
    }



    if (this.state.selected) {
        console.log("SELECTED!");
        if (neighbours == 3 || neighbours == 2) {
            this.setState({
                dying: false
            })
        }
        else if (neighbours < 2) {
            this.setState({
                dying: true
            })
        }
        else if (neighbours > 3) {
            this.setState({
                dying: true
            })
        }
    }
    else {
        if( neighbours == 3) {
            this.setState({
                dying : false
            })
        }
    }
},

isInBoard( i, j, x, y) {
    var flag = false;
    if (i >= 0 && i <= x && j >= 0 && j <= y) {
        flag = true;
    }
    return flag; 
},

handleClick() {
    this.setState({
        selected: !this.state.selected
    })
},

render() {
    return <td onClick = {this.handleClick} className={this.state.selected ? "cell selected" : "cell"}></td>;
}

}）

同时

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} column ={x} row={y} />);
        }
        rows.push(<tr key={y}>{cells}</tr>);
    }
    return <table><tbody>{rows}</tbody></table>;

}

}）

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

})

Answer 1

我认为问题在于您在组件上引用state，但它不是通过组件实例的'ref'，因此您不会拥有状态。我想你想看看refs。您是否尝试记录传递给isAlive的内容？

由于这看起来更像是一个学习应用而不是一个真实的项目，我建议花更多的时间学习React组件和thinking in React然后发布每个bug ...我们愿意帮助但不能做适合你的工作：）

欢迎来到React，祝你好运！

生命游戏：无法阅读财产＆＃39;州＆＃39;未定义的

1 个答案: