[英]state gets updated before setState is called
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});
}
这是因为您的boardData
是多维的,您不能仅使用slice
方法克隆它。 像这样使用map
。
var parseArray = this.state.boardData.map(function(arr) {
return arr.slice();
});
或使用箭头语法
var parseArray = this.state.boardData.map(a => a.slice());
因为它是一个嵌套数组。 您只是复制第一级( 浅层克隆 )。 内部数组仍然是相同的引用。 考虑以下示例:
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.