在調用函數之前對 React 數組進行排序

Question

我正在展示排序數組的步驟，並嘗試在 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>
  )

歷史記錄的控制台日志

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}

任何幫助表示贊賞，我完全堅持為什么它會像這樣工作。

Answer 1

您需要了解 JavaScript 和一般編程語言中的對象引用。

舉個例子：

 const array = []; const someObject = { a: "foo" }; array.push(someObject); someObject.a = "bar"; array.push(someObject); console.log(JSON.stringify(array, null,2));

這不會打印：

[
  {
    "a": "foo"
  },
  {
    "a": "bar"
  }
]

它打印：

[
  {
    "a": "bar"
  },
  {
    "a": "bar"
  }
]

因為在第一次推送到數組時，您並沒有推送當時的對象，而是推送對對象的引用。

在這種情況下，當您在以后更改對象的a屬性，（你變異的對象）的數組中的價值變化。

這種混亂就是為什么人們喜歡像這樣避免屬性重新分配，為什么不可變編程是一回事。

你的代碼基本上有同樣的問題。

每次循環時，您都將相同的數組推送到歷史數組，然后您稍后會對該數組進行變異。

如果您將 history.push 行更改為：

history.push(JSON.parse(JSON.stringify(sArr)));

這可以解決您的問題。

parse-stringify 所做的只是克隆數組對象，即它創建一個新的數組對象。

Answer 2

我不知道這是否有幫助，但我決定我不妨鏈接它：沙箱！

我認為實現渲染部分會很好，這樣可以更容易地看到數據發生了什么。