Javascript 正在发生变异的React中的数组

我已经阅读了几篇关于在React中防止数组发生变异的文章，但我不明白为什么我原来的数组会发生变异。在componentDidMount中，我将访问数据库，检索每周的赢家和输家记录，并将记录保存到state。（一个队每周打三场比赛。）

---

有什么想法吗？我无法理解这一点。

通过spread复制数组仍然会创建对数组中包含的任何对象的引用

constarray1=[1，{a:2}[3,4]]；
常量数组2=[…数组1]；
array2[0]=“在array1中保持不变”；
array2[1].a=“两者都已更改”；
array2[2][0]=“数组是对象”；
log（'array1:'，array1）；
//array1:[1，{“a”：“在两个”}中都发生了更改，[“数组都是对象”，4]]
log（'array2:'，array2）；
//array2:[“在array1中没有改变，{“a:”在这两个“}，[“数组是对象”，4]]

@pilchard的答案是正确的。首先，您需要创建数组的每个属性或元素的副本，然后将其推送到父组合数组。您需要使用

Object.assign（）

或spread运算符来执行此操作

---

通过排列复制数组仍然会创建对数组中包含的任何对象的引用。

Object.assign（）

仍然会创建对嵌套对象的引用。

async componentDidMount() {
    document.body.style.background = '#9bcaf1';
    await this.getInitialStats();
    this.processStats();
  }

  async getInitialStats(): Promise<void> {
    const allRecords: TeamWeek[] = await getAllResults();
    this.setState({
      allRecords,
    });
  }

processStats(): void {
    const allRecordsClone = [...this.state.allRecords];
    const combinedRecords: TeamWeek[] = calculateOverallStats(allRecordsClone);
    this.setState({
      combinedRecords,
    });
  }
export const calculateOverallStats = (allRecords: TeamWeek[]): TeamWeek[] => {
  const allRecordsClone = [...allRecords];
  const combinedRecs: TeamWeek[] = [];
  const teamNamesCollected: string[] = [];

  // Combine wins, losses, ties, points
  allRecordsClone.forEach((rec) => {
    const { team_name, wins, losses, ties, total_points } = rec;
    if (!teamNamesCollected.includes(team_name)) {
      combinedRecs.push(rec);
      teamNamesCollected.push(team_name);
    } else {
      const teamIndex = combinedRecs.findIndex((combRec) => combRec.team_name === team_name);
      combinedRecs[teamIndex].wins += wins;
      combinedRecs[teamIndex].losses += losses;
      combinedRecs[teamIndex].ties += ties;
      combinedRecs[teamIndex].total_points += total_points;
    }
  });
  return allRecordsClone;
};