React TSX循环生成井字棋Square组件时点击事件异常求助

你遇到的问题是循环生成棋盘时，闭包陷阱和重复key导致的组件状态异常，具体表现为点击第一个方块时第4、7个方块也触发点击，以下是问题分析和修复方案：

问题原因 #

1. 闭包陷阱：你在循环中使用的cellId是声明在循环外部的变量，所有onSquareClick回调都会引用这个同一个变量。当循环结束后，cellId已经变成9，点击触发时实际传递的是最终的cellId值，导致多个方块绑定了同一个点击参数。
2. 重复的key：Square组件的key使用了j，每行的三个Square的key都是0、1、2，React会认为这些是相同的组件并复用，引发状态混乱，导致多个方块的点击和显示异常。

修复后的代码 #

const generateBoard = () => {
  const board = [];
  // 遍历行
  for (let i = 0; i < 3; i++) {
    const rowSquares = [];
    // 遍历列
    for (let j = 0; j < 3; j++) {
      // 计算当前方块的唯一ID
      const cellId = i * 3 + j;
      rowSquares.push(
        <Square
          key={cellId} // 使用唯一ID作为key
          value={squares[cellId]}
          onSquareClick={() => handleSquareClick(cellId)}
        />
      );
    }
    board.push(
      <div key={i} className="board-row">
        {rowSquares}
      </div>
    );
  }
  return board;
};

修复说明 #

• 唯一key：用i*3 + j生成每个方块的唯一ID作为key，确保React能正确识别每个组件，避免复用导致的状态问题。
• 闭包修复：在每次列循环内部声明const cellId = i*3 + j，利用let/const的块级作用域特性，让每个onSquareClick回调捕获当前迭代的cellId值，而不是外部变量的引用。

内容的提问来源于stack exchange，提问作者Ademir Júnior