在調用setState之前，狀態會更新

Question

lifeParser是一個被稱為處理和更新boardData的方法。 問題是當循環仍在處理時，boardData會更新。

lifeParser(){
    var parseArray = this.state.boardData.slice(0);

    for(var i=0;i<30;i++){
        for(var j=0;j<30;j++){
            parseArray[i][j] = 5; // boardData gets updated here before setState is even called
        }
    }
    this.setState({boardData : parseArray});
}

Answer 1

這是因為您的boardData是多維的，您不能僅使用slice方法克隆它。 像這樣使用map 。

var parseArray = this.state.boardData.map(function(arr) {
    return arr.slice();
});

或使用箭頭語法

var parseArray = this.state.boardData.map(a => a.slice());

Answer 2

因為它是一個嵌套數組。 您只是復制第一級（ 淺層克隆 ）。 內部數組仍然是相同的引用。 考慮以下示例：

var nestedArray = [
 [1, 2, 3],
 [6, 6, 6, 6, 7, 8],
 [0, 3, 5, 6, 5]
];

// This only does a shallow clone
var copy = nestedArray.slice(0);

// When you do this
copy[0][0] = 100;

// `nestedArray` will also be mutated,
// you get 100 here
console.log(nestedArray[0][0]);

在你的情況下，你可以做一個深度克隆或只是使用map()類的東西來獲得一個全新的數組：

lifeParser(){
    var parseArray = this.state.boardData.slice(0);

    for (var i = 0; i < 30; i++) {
      parseArray[i] = parseArray[i].map(() => 5);
    }
    this.setState({boardData : parseArray});
}

在此示例中執行深度克隆更昂貴，因為您需要多一個循環。 這里使用map()的好處是您可以同時計算和克隆數據。

在此示例中，您還可以使用兩個map() ：

lifeParser(){
    var parseArray = this.state.boardData.map(innerArray => innerArray.map(() => 5));
    this.setState({boardData : parseArray});
}

// Or this might be more readable:
var parseArray = this.state.boardData.map(innerArray => {
  return innerArray.map(() => 5);
});