Question

在写出康威的生命游戏时，我收到的错误是状态实际上没有更新。我得到EasyThread的警告，但到目前为止我所做的一切都没有帮助。您可以在下面找到我的应用程序组件：

setState(...): Can only update a mounted or mounting component.

问题在于class App extends React.Component { constructor(props) { super(props); this.state = { board: [], rows: 50, cols: 50, cycles: 0 } this.createBoard(); } createBoard() { var newBoard = []; for (var i = 0; i < this.state.rows; i++) { var row = []; for (var j = 0; j < this.state.cols; j++) { let fillValue; if (Math.random() > 0.65) { fillValue = true; } else { fillValue = false; } row.push(fillValue); } newBoard.push(row); } console.log(newBoard); this.setState({board: newBoard}); } render() { return( <div id="root"> <h1>Conway's Game of Life</h1> <Controller /> {console.log(this.state.board)} <Board board={this.state.board} rows={this.state.rows} cols={this.state.cols} /> <p>Years Passed: {this.state.cycles}</p> </div> ); } }函数末尾的setState。 setState上面的createBoard()打印得很好，但是render方法中的另一个打印出一个空数组。

Answer 1

更改你调用createBoard（）方法的位置修复了这个错误。而不是调用方法是构造函数我将它移动到componentDidMount请注意你的两个组件 Board ＆amp;代码中缺少控制器，所以我已将它们评论出来

这是代码

class TestJS extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            board: [],
            rows: 50,
            cols: 50,
            cycles: 0
        };
        this.createBoard = this.createBoard.bind(this);
    }

    componentDidMount(){
        this.createBoard();
    }

    createBoard() {
        var newBoard = [];
        for (var i = 0; i < this.state.rows; i++) {
            var row = [];
            for (var j = 0; j < this.state.cols; j++) {
                let fillValue;
                if (Math.random() > 0.65) {
                    fillValue = true;
                } else {
                    fillValue = false;
                }
                row.push(fillValue);
            }
            newBoard.push(row);
        }
        console.log(newBoard);
        this.setState({board: newBoard});
    }

    render() {
        return(
            <div id="root">
                <h1>Conway's Game of Life</h1>
                {console.log(this.state.board)}
                <p>Years Passed: {this.state.cycles}</p>
            </div>
        );
    }
}

export default TestJS;

Answer 2

这正是错误所说的。您正在未安装的组件上设置状态。 调用构造函数时尚未挂载组件 在componentDidMount()生命周期功能中执行：

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        board: [],
        rows: 50,
        cols: 50,
        cycles: 0
    };
    this.createBoard = this.createBoard.bind(this);
}

componentDidMount() {
    this.createBoard();
}

createBoard() {
    var newBoard = [];
    for (var i = 0; i < this.state.rows; i++) {
        var row = [];
        for (var j = 0; j < this.state.cols; j++) {
            let fillValue;
            if (Math.random() > 0.65) {
                fillValue = true;
            } else {
                fillValue = false;
            }
            row.push(fillValue);
        }
        newBoard.push(row);
    }
    console.log(newBoard);
    this.setState({board: newBoard});
}

render() {
    return(
        <div id="root">
            <h1>Conway's Game of Life</h1>
            <Controller />
            {console.log(this.state.board)}
            <Board
                board={this.state.board}
                rows={this.state.rows}
                cols={this.state.cols}
            />
            <p>Years Passed: {this.state.cycles}</p>
        </div>
    );
}
}

请查看Lifecycle methods。

setState更新已挂载的状态

2 个答案: