在组件将装载期间未设置数组状态变量

Question

>我有一个数组状态变量，我试图将其设置为在componentWillMount（）方法期间创建的数组

getInitialState: function() {
return {
  matrix: [],
  generation: 0,
  neighbors: [[0,1], [1,0], [-1, 0], [0, -1], [1, 1], [-1, -1], [-1, 0], [0, -1]]
};
},
componentWillMount: function() {
function Cell() {
    this.neighbors = 0;
    this.isAlive = false;
};
var matrix = [];
var dim = this.props.dim;
for (var i = 0; i < dim; i++) {
  var row = [];
  for (var j = 0; j < dim; j++) {
    row.push(new Cell());
  }
  matrix.push(row);
}
this.setState({matrix: matrix});
this.createGrid();
},

如您所见，我正在 cwm（） 方法中填充"矩阵"变量，并将状态"矩阵"变量设置为等于这个新的"矩阵"变量。因此，在此方法运行后，状态矩阵变量应填充一堆 Cells。

但是，在从 cwm（） 方法调用的 createGrid（） 方法中，我尝试访问矩阵中的元素，如下所示：

var currentCell = this.state.matrix[i][j];

但是，这会导致错误，指出：无法读取未定义的属性"0"。

我想知道为什么没有设置状态变量以及如何修复它。

干杯。

Answer 1

setState是异步的，这意味着在您调用this.createGrid();时状态尚未更新

您可以在状态更新后调用createGrid，方法是将函数作为回调参数传递

this.setState({matrix: matrix}, this.createGrid.bind(this));

另一种可能的解决方案是将matrix传递给this.createGrid(matrix)并在那里设置状态。