使用 React 更新二維數組並掛鈎 useState 和 useEffect

Question

我正在嘗試使用 React hooks 在 2d 數組中創建簡單的彈跳球游戲。 我有一個問題要解決：

當球擊中綠色區域時，它應該將向量更改為隨機並將其在數組中的值從 "Y" 更改為 "0" 。 它改變了方向，但綠色空間並沒有從板上消失。 重新渲染后它仍然回來。

這是一個完整的代碼： https ://stackblitz.com/edit/react-cvlqsp?file=src/App.js

編輯

我發現綠色框消失了，但是每次球移動時，它都會重新渲染，並且看起來永遠像它。 我忍不住每次都不渲染整個東西，而只渲染球的運動。 我應該在 useEffect 中使用它嗎？ 如何？

這是用於隨機向量和數組更改值的函數不起作用：

let random = () => {
    if (Math.random() < 0.5) {
      setVectorX((vectorX *= -1));
    } else {
      setVectorY((vectorY *= -1));
    }
  };

  let checkforYCollsion = () => {
    if (board[positionY][positionX] === 'Y') {
      random();
      board[positionY][positionX] = '0'
      
    }
  };

Answer 1

您需要通過調用setBoardToDisplay來使用更改后的 2d 數組更新狀態，而不是通過分配board的值，因為這不會觸發重新渲染。 您可以通過使用setBoardToDisplay中的回調函數來做到這一點。

setBoardToDisplay((prev) => {
  // make desired changes to prev and return it
})