React中如何在map循环内生成唯一的key属性值？

看起来你在给Cell组件设置唯一key的时候遇到了麻烦——当前代码里所有Cell的key都是同一个值（this.state.counter +1），这肯定没法保证唯一性，React也没法正确区分每个单元格。我来给你几个可行的方案：

方案一：用行+列索引组合生成唯一Key（推荐） #

这是React列表渲染里最常用的安全方式，因为每个单元格的行索引和列索引组合起来必然是唯一的，而且不会随着渲染重复生成新值，性能更好。修改你的render部分代码：

render() {
  const mainBoard = Array.from({length: this.props.nrows}).map((_, rowIndex) => (
    <tr key={rowIndex}> {/* 别忘了给tr也加唯一key */}
      {Array.from({length: this.props.ncols}).map((_, colIndex) => (
        <Cell 
          key={`${rowIndex}-${colIndex}`} 
          onClick={() => this.flipCellsAround(rowIndex, colIndex)} {/* 这里建议传递行列索引，不然flip方法不知道操作哪个单元格 */}
          isLit={this.state.board[rowIndex][colIndex]} {/* 这里要从state的board里取状态，而不是每次渲染随机生成！ */}
        />
      ))}
    </tr>
  ));

  return (
    <div>
      <h1>BOARD</h1>
      <table className="Board">
        <tbody>
          {mainBoard}
        </tbody>
      </table>
    </div>
  );
}

为什么这个方案更好？ #

• 完全保证唯一性：每个单元格的rowIndex-colIndex组合不会重复
• 性能更优：每次渲染时key不会变化，React不会重复创建DOM节点
• 逻辑清晰：能直接通过key对应到具体的单元格位置

方案二：用自增计数器生成Key（不推荐，但满足你的需求） #

如果你一定要用自增数字作为key，可以在渲染时用一个闭包变量来计数，但要注意这种方式会导致每次渲染都生成全新的key，React会重新渲染所有Cell，影响性能。代码示例：

render() {
  let keyCounter = 0; // 每次render时重置计数器
  const mainBoard = Array.from({length: this.props.nrows}).map((_, rowIndex) => (
    <tr key={rowIndex}>
      {Array.from({length: this.props.ncols}).map((_, colIndex) => {
        keyCounter++;
        return (
          <Cell 
            key={keyCounter} 
            onClick={() => this.flipCellsAround(rowIndex, colIndex)} 
            isLit={this.state.board[rowIndex][colIndex]}
          />
        );
      })}
    </tr>
  ));

  // ... 其余return部分参照方案一调整
}

顺便提两个你代码里的小问题： #

1. isLit的逻辑错误：你现在用this.props.chanceLightStartsOn > Math.random()，这会导致每次组件渲染时都重新随机生成单元格的亮灭状态，而不是从state.board里读取保存的状态，这会让你的游戏逻辑完全混乱，一定要改成从this.state.board[rowIndex][colIndex]取值。
2. HTML语法错误：h1标签不能放在tbody里面，这不符合HTML规范，我已经在方案一里把它移到了table外面的容器中。

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