React井字棋无法显示点击方块行列位置问题求助

不用搞复杂的硬编码数组，直接通过方块的索引就能算出行列位置，比你之前的方法简单靠谱，具体步骤如下：

• 核心逻辑：方块索引是0-8的数字，直接计算行列：

  • 行号：Math.floor(index / 3) + 1（如果要从0开始计数就去掉+1）
  • 列号：(index % 3) + 1（同理，0-based就去掉+1）

• 修改Board组件的handlePlay函数：
  拿到点击的index后直接计算行列，然后把位置信息存到状态或者直接展示：

  handlePlay(index) {
    // 计算行列（这里用1-based计数，符合日常习惯）
    const row = Math.floor(index / 3) + 1;
    const col = (index % 3) + 1;
  
    // 更新状态，记录最后点击的位置
    this.setState(prevState => ({
      squares: prevState.squares.map((square, i) => {
        if (i === index) return prevState.xIsNext ? 'X' : 'O';
        return square;
      }),
      xIsNext: !prevState.xIsNext,
      lastClickedPos: `行${row}，列${col}` // 新增状态字段
    }));
  
    // 也可以直接打印到控制台调试
    console.log(`点击位置：行${row}，列${col}`);
  }
  

• 在界面上显示位置：
  在Board的render方法里，添加展示位置的元素：

  render() {
    const status = this.state.xIsNext ? 'Next player: X' : 'Next player: O';
    return (
      <div>
        <div className="status">{status}</div>
        {/* 新增位置显示 */}
        {this.state.lastClickedPos && (
          <div className="click-pos">最后点击：{this.state.lastClickedPos}</div>
        )}
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
  

• 补充说明：
  你之前用硬编码数组+indexOf的方法无效，是因为indexOf会查找数组中与目标值完全匹配的元素，而你传入的index是数字，locations里是数组（比如[0,0]），根本匹配不上，自然拿不到正确位置。直接用索引计算的方法既高效又不会出错。

内容的提问来源于stack exchange，提问作者Hi - P