如何解决React中的数组被突变
我已经阅读了一些关于防止数组在React中发生变异的条目,但是我不知道为什么我的原始数组会发生变异。在componentDidMount中,我将转到数据库并检索每周的输赢记录,并将记录保存到状态中。 (每周一个团队进行三场比赛。)
A
然后,我调用第二个函数,该函数获取每个团队的一周记录并将其合并为一个记录。因此,如果一支球队每三周输掉所有三场比赛,那应该合并为一条记录,表明球队输了九场比赛。我将其另存为单独的状态变量。但是,即使我以为我正在克隆数组,原始状态数组也将发生突变。我可以推送到克隆的数组中,并且可以正常工作,但是该函数的某些功能正在搞砸。
async componentDidMount() {
document.body.style.background = '#9bcaf1';
await this.getInitialStats();
this.processStats();
}
async getInitialStats(): Promise<void> {
const allRecords: TeamWeek[] = await getAllResults();
this.setState({
allRecords,});
}
有什么想法吗?我无法弄清楚。
解决方法
通过传播复制数组仍会创建对数组中包含的任何对象的引用。
const array1 = [1,{a: 2},[3,4]];
const array2 = [...array1];
array2[0] = "unchanged in array1";
array2[1].a = "changed in both";
array2[2][0] = "arrays are Objects";
console.log('array1: ',array1);
// array1: [1,{"a": "changed in both"},["arrays are Objects",4]]
console.log('array2: ',array2);
// array2: ["unchanged in array1",4]]
鉴于此,您需要使用Object.assign()
或散布每个对象或数组,然后再推入CombinedArray。
React文档在这里涵盖了此问题:Immutability Helpers
, @pilchard的答案是正确的。首先,您需要创建数组的每个属性或元素的副本,然后将其推送到父组合数组。您需要使用Object.assign()
或散布运算符中的任何一个。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。