Javascript setState更新已装载状态

在写康威的《生活的游戏》时，我遇到了一个错误，状态实际上没有被更新。我收到一条警告，

setState（…）：只能更新已安装或正在安装的组件。

但我迄今为止试图摆脱的所有东西都没有帮助。您可以在下面找到我的应用程序组件：

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
董事会：[]，
行：50，
科尔斯：50，
周期：0
}
这个.createBoard（）；
}
createBoard（）{
var newBoard=[]；
for（var i=0；i0.65）{
fillValue=true；
}否则{
fillValue=false；
}
row.push（fillValue）；
}
推（世界其他地区）；
}
控制台日志（新板）；
this.setState（{board:newBoard}）；
}
render（）{
返回(
生命游戏
{console.log（this.state.board）}
几年过去了：{this.state.cycles}

);
}
}

---

问题在于

createBoard（）

函数末尾的setState。setState上方的

console.log

打印得很好，但render方法中的另一个打印出一个空数组。

更改调用createBoard（）的位置方法修复了此错误。我没有调用方法is constructor，而是将其移动到componentDidMount。请注意，代码中缺少两个组件Board&Controller，因此我已将它们注释掉

这是密码

类TestJS扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 董事会：[]， 行：50， 科尔斯：50， 周期：0 }; this.createBoard=this.createBoard.bind（this）； } componentDidMount（）{ 这个.createBoard（）； } createBoard（）{ var newBoard=[]； for（var i=0；i0.65）{ fillValue=true； }否则{ fillValue=false； } row.push（fillValue）； } 推（世界其他地区）； } 控制台日志（新板）； this.setState（{board:newBoard}）； } render（）{ 返回( 生命游戏 {console.log（this.state.board）} 几年过去了：{this.state.cycles}

); } }

---

导出默认TestJS更改调用createBoard（）方法的位置可修复此错误。我没有调用方法is constructor，而是将其移动到componentDidMount。请注意，代码中缺少两个组件Board和Controller，因此我已将它们注释掉

这是密码

类TestJS扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 董事会：[]， 行：50， 科尔斯：50， 周期：0 }; this.createBoard=this.createBoard.bind（this）； } componentDidMount（）{ 这个.createBoard（）； } createBoard（）{ var newBoard=[]； for（var i=0；i0.65）{ fillValue=true； }否则{ fillValue=false； } row.push（fillValue）； } 推（世界其他地区）； } 控制台日志（新板）； this.setState（{board:newBoard}）； } render（）{ 返回( 生命游戏 {console.log（this.state.board）} 几年过去了：{this.state.cycles}

); } }

---

导出默认TestJS这正是错误所说的。您正在为未安装的组件设置状态调用构造函数时组件尚未装入
在

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
董事会：[]，
行：50，
科尔斯：50，
周期：0
};
this.createBoard=this.createBoard.bind（this）；
}
componentDidMount（）{
这个.createBoard（）；
}
createBoard（）{
var newBoard=[]；
for（var i=0；i0.65）{
fillValue=true；
}否则{
fillValue=false；
}
row.push（fillValue）；
}
推（世界其他地区）；
}
控制台日志（新板）；
this.setState（{board:newBoard}）；
}
render（）{
返回(
生命游戏
{console.log（this.state.board）}
几年过去了：{this.state.cycles}

);
}
}

请看一下。
这正是错误所说的。您正在为未安装的组件设置状态调用构造函数时组件尚未装入

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
B