Javascript 在调用函数之前对数组进行排序

我正在显示排序数组的步骤，并尝试在react中呈现不同的步骤。当我调用冒泡排序函数时，在单击按钮后，数组已经排序

创建我的状态变量：

  const [arr, setArr] = useState(resetArr())

  function resetArr() {
    return new Array(10).fill().map(() => {
      return ({
      num: Math.floor(Math.random() * 100),
      eval: false
    })})
  }

气泡排序功能

  function bubbleSort() {
    const history = [];
    const sArr = arr.slice();
    let len = sArr.length;
    for (let i = len-1; i >= 0; i--) {
      for (let j = 1; j<=i; j++) {
        if (sArr[j-1].num > sArr[j].num) {
          const temp = sArr[j-1].num;
          sArr[j-1].num = sArr[j].num;
          sArr[j].num = temp;
        }
        history.push(sArr);
      }
    }
    console.log(history)
  }

  return (
    <div>
      <div className="arr-container">
        {arr.map((item, idx) => 
          <div key={idx} className="arr-item">
            {item.num}
          </div>
        )}
      </div>
      <div>
        <button onClick={() => bubbleSort()}>Bubble</button>
      </div>
    </div>
  )

---

非常感谢您的帮助，我完全理解它为什么会这样工作。

您需要了解JavaScript和编程语言中的对象引用

例如：

const数组=[]；
常量someObject={
答：“福”
};
array.push（someObject）；
someObject.a=“bar”；
array.push（someObject）；
log（JSON.stringify（array，null，2））我不知道这是否会有帮助，但我决定还是把它链接起来：

我认为实现呈现部分会很好，这样可以更容易地看到数据发生了什么。
您可以将其发布为代码沙盒/另一个console.log在哪里？排序完成后，代码只显示一个，因此如果这是单击的结果，我看不到输出中的问题twice@dwjohnston@diedu历史是一个数组，看起来有点像这样，[[{num:0，eval:false}，]，]，我在for循环的每个阶段都在推历史你在每个循环上都在推相同的数组到历史数组。我甚至没有想到这个。。。我很困惑，谢谢@dwjohnston
0: Array(10)
0: {num: 0, eval: false}
1: {num: 3, eval: false}
2: {num: 9, eval: false}
3: {num: 18, eval: false}
4: {num: 33, eval: false}
5: {num: 41, eval: false}
6: {num: 53, eval: false}
7: {num: 65, eval: false}
8: {num: 94, eval: false}
9: {num: 99, eval: false}

1: Array(10)
0: {num: 0, eval: false}
1: {num: 3, eval: false}
2: {num: 9, eval: false}
3: {num: 18, eval: false}
4: {num: 33, eval: false}
5: {num: 41, eval: false}
6: {num: 53, eval: false}
7: {num: 65, eval: false}
8: {num: 94, eval: false}
9: {num: 99, eval: false}