如何在React与JavaScript的棋盘2D循环中生成唯一key

• 别用useState做计数器！这就是无限循环的根源：每次渲染时更新state，state变化会触发组件重新渲染，重新渲染又会更新state，直接陷入死循环。
• 利用棋盘的行列组合生成唯一Key，这是最直接且靠谱的方式——每个Tile的(row, col)组合天然不重复，完全满足React对Key唯一性的要求。

方式一：用嵌套map生成棋盘（推荐，更符合React风格） #

function Chessboard() {
  const boardSize = 8; // 标准国际象棋棋盘尺寸

  return (
    <div className="chessboard">
      {Array(boardSize).fill().map((_, rowIndex) => (
        <div key={`row-${rowIndex}`} className="board-row">
          {Array(boardSize).fill().map((_, colIndex) => (
            {/* 用行号+列号拼接成唯一key */}
            <Tile 
              key={`${rowIndex}-${colIndex}`} 
              row={rowIndex} 
              col={colIndex} 
            />
          ))}
        </div>
      ))}
    </div>
  );
}

方式二：用for循环预生成Tile列表 #

如果你更习惯用for循环而非map，也可以预先生成所有Tile后再渲染：

function Chessboard() {
  const boardSize = 8;
  const tileElements = [];

  for (let row = 0; row < boardSize; row++) {
    for (let col = 0; col < boardSize; col++) {
      // 同样用row-col作为唯一key
      tileElements.push(
        <Tile key={`${row}-${col}`} row={row} col={col} />
      );
    }
  }

  // 可根据布局需求调整，比如按行分组
  return <div className="chessboard">{tileElements}</div>;
}

补充说明： #

• React的key只需要在同一层级的兄弟组件中唯一，不需要全局唯一，所以row-col的组合完全满足要求。
• 不要用随机数或者渲染时动态递增的计数器做key：前者会导致组件频繁重新挂载，后者就是你遇到的无限循环问题。

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