React useState setter方法未正确刷新组件问题求助

期望目标 #

我期望生成新矩阵，使棋盘回到无已选中格子的初始状态。

问题复现步骤 #

• 点击任意节点，观察广度优先搜索的运行效果。
• 按下“r”键，可见组件重新渲染但仍保留旧矩阵状态。

矩阵生成实现 #

我用以下两个函数生成矩阵：

function createNode(rc: string, i: number, j: number) {
  const cur: node = {
    row: i,
    col: j,
    id: rc,
    inRoute: false,
    checked: false,
    distance: Infinity,
    end: rc === FINISH_NODE,
    start: rc === START_NODE,
  };
  return cur
}

function getBoard() {
  console.log('New board')
  var board: node[][] = [];
  for (let i = 0; i < ROWS; i++) {
    board[i] = [];
    for (let j = 0; j < COLS; j++) {
      const rc = `${i},${j}`
      const cur = createNode(rc, i, j)
      board[i][j] = cur;
    }
  }
  return board;
}

初始状态设置 #

组件初始化时，我调用getBoard()生成初始矩阵并传入useState：

const matrix = getBoard()
const [board, setBoard] = useState(matrix)

刷新逻辑实现 #

我定义了键盘“r”键的触发函数，试图通过setBoard传入新生成的矩阵来重置棋盘：

const onRefresh = (event: { key: string }) => {
  setBoard(getBoard())
  setFinishNode(FINISH_NODE)
};

现在的问题是：按下“r”键时，控制台能打印出New board，说明getBoard()确实执行了，但组件重新渲染后，棋盘还是保留着旧的矩阵状态，没有回到初始状态，这让我十分困惑。

提前感谢您的帮助~！
谢谢~！

内容的提问来源于stack exchange，提问作者PrimeTimeTran