setState 更新挂载状态

Question

在编写 Conway 的生命游戏时，我收到一个错误，其中状态实际上没有被更新。我收到 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>
    );
}
}

问题出在 createBoard() 函数末尾的 setState 上。 setState 上面的 console.log 打印出来很好，但是 render 方法中的另一个打印出一个空数组。

Answer 1

改变你调用 createBoard() 方法的地方修复了这个 error.Instead 调用方法是构造函数我把它移到了 componentDidMount 请注意你的两个组件 Board & Controller 在代码中丢失了，所以我把它们注释掉了

这是代码

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 更新挂载状态

setState updating a mounted state

javascript

setstate

reactjs