title: Array in React being mutated
body: <p>I've read several entries on keeping arrays from being mutated in React, but I can't figure out why my original array is being mutated. In the componentDidMount, I'm going to the database and retrieving win-loss records for each week and saving the records to state. (Each week a team plays three games.)</p>
  <pre><code>async componentDidMount() {
      document.body.style.background = '#9bcaf1';
      await this.getInitialStats();
      this.processStats();
    }
  
    async getInitialStats(): Promise&lt;void&gt; {
      const allRecords: TeamWeek[] = await getAllResults();
      this.setState({
        allRecords,
      });
    }
  </code></pre>
  <p>Then I call a second function that takes each team's record for the week and combines them into one record. So if a team has lost all three games in each of three weeks, that should combine to one record that shows the team lost nine games. I save that as a separate state variable. However the original state array is being mutated as well, even though I thought I was cloning the array. I can do a push into the cloned array, and it works correctly, but something with the function is screwing things up.</p>
  <pre><code>processStats(): void {
      const allRecordsClone = [...this.state.allRecords];
      const combinedRecords: TeamWeek[] = calculateOverallStats(allRecordsClone);
      this.setState({
        combinedRecords,
      });
    }
  export const calculateOverallStats = (allRecords: TeamWeek[]): TeamWeek[] =&gt; {
    const allRecordsClone = [...allRecords];
    const combinedRecs: TeamWeek[] = [];
    const teamNamesCollected: string[] = [];
  
    // Combine wins, losses, ties, points
    allRecordsClone.forEach((rec) =&gt; {
      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) =&gt; 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;
  };
  </code></pre>
  <p>Any thoughts? I cannot figure this out.</p>