React中的数组被突变

问题描述

我已经阅读了一些关于防止数组在React中发生变异的条目，但是我不知道为什么我的原始数组会发生变异。在componentDidMount中，我将转到数据库并检索每周的输赢记录，并将记录保存到状态中。（每周一个团队进行三场比赛。）

然后，我调用第二个函数，该函数获取每个团队的一周记录并将其合并为一个记录。因此，如果一支球队每三周输掉所有三场比赛，那应该合并为一条记录，表明球队输了九场比赛。我将其另存为单独的状态变量。但是，即使我以为我正在克隆数组，原始状态数组也将发生突变。我可以推送到克隆的数组中，并且可以正常工作，但是该函数的某些功能正在搞砸。

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()或散布运算符中的任何一个。

Object spread vs. Object.assign

arrays arrays javascript mutate reactjs reactjs