React中gameBoard状态更新后组件为何未重新渲染？

核心问题很明确：你在渲染棋盘列表时，遍历的是常量initialGameBoard，而非通过useState维护的状态变量gameBoard。

React组件的重新渲染逻辑是：只有当组件依赖的状态、props发生变化时，才会重新计算并渲染最新UI。你当前渲染的内容和gameBoard状态完全无关，哪怕setGameBoard更新了状态，组件也不会渲染出最新的棋盘内容。

修改方法 #

只需把渲染时遍历的数据源从initialGameBoard替换为gameBoard即可：

import { useState } from "react";

const initialGameBoard = [
 [null, null, null],
 [null, null, null],
 [null, null, null],
];

export default function GameBoard() {
  const [gameBoard, setGameBoard] = useState(initialGameBoard);

  function handleSelectedSqare(rowIndex, colIndex) {
    console.log("aaaa");
    setGameBoard((prevGameBoard) => {
      const updatedBoard = [
        ...prevGameBoard.map((innerArray) => [...innerArray]),
      ];
      console.log(updatedBoard);
      updatedBoard[rowIndex][colIndex] = "X";
      return updatedBoard;
    });
  }

  return (
    <ol id="game-board">
      {/* 替换为状态变量gameBoard */}
      {gameBoard.map((row, rowIndex) => (
        <li key={rowIndex}>
          <ol>
            {row.map((playerSymbol, colIndex) => (
              <li key={colIndex}>
                <button onClick={() => handleSelectedSqare(rowIndex, colIndex)}>
                  {playerSymbol}
                </button>
              </li>
            ))}
          </ol>
        </li>
      ))}
    </ol>
  );
}

补充说明 #

你之前的setGameBoard逻辑是正确的——通过解构嵌套数组创建了全新副本，没有直接修改原状态，符合React状态更新的不可变规则。只要把渲染数据源换成状态变量，点击按钮更新状态后，组件就会重新渲染，展示最新的playerSymbol值。

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