当仅调用一个数组进行更改/排序时，React state arrays 正在更改/排序在一起

Question

I have two arrays in my state, one is randomly generated and I want the other to be the sorted version of the random array. Every time I call my sort function on my second array they always both change? Does anyone know why this is. I'm pulling my hair out over this...

  constructor(props) {
    super(props);
    this.state = {
      array: Array.from({ length: 10 }, () => Math.floor(Math.random() * 100)),
      sortedArray: [],
     };

    this.generateArray = this.generateArray.bind(this);
  };

render() {
    return (
      <div>
        <button onClick={this.generateArray}>Generate Array</button>
      </div>
    );
  }

generateArray(e) {

    let a = this.state.array;
    this.setState({ sortedArray: a.sort() });
}

When I call this function in my render method, both the state.array and state.sortedArray change to be sorted, how do I only sort one?

Answer 1

The Array.prototype.sort() method in JavaScript sorts the array in-place; in other words, it changes the original array. Putting a slice() in front of sort() to make a shallow copy of the array will fix the problem: a.slice().sort()