react-单击表上的数据返回错误的行和列索引

Question

我正在使用react编写一个简单的数据表。单击一个表单元格后，我需要函数来知道它的确切行索引和列索引。在我的例子中，我有一个3x3表，索引从0到2。

function getTable(){
    let rowIndex = 0;

    this.tableData.forEach(row => {
      const rowValues = Object.values(row);
      let colIndex = 0;

        let rowData = [];
        rowValues.forEach(colVal => {
          rowData.push(
            <td key={colIndex} onClick={() => this.enableEdit(rowIndex, colIndex)}>
              {colVal}
            </td>
          );
          console.log("row: " + rowIndex + ", column: " + colIndex);
          colIndex++;
        });

        bodyRows.push(<tr key={rowIndex}>{rowData}</tr>);

      rowIndex++;
    });

      return (
      <table className="table table-dark">
        <thead>
          <tr>{headColumns}</tr>
        </thead>
        <tbody>{bodyRows}</tbody>
      </table>
    );

}

    enableEdit(row, col){
       console.log(row, col);
    }

控制台日志，一切正常。我的结果如下：

row: 0, column: 0
row: 0, column: 1
row: 0, column: 2
row: 1, column: 0,
row: 1, column: 1,
row: 1, column: 2
...

钥匙也很好用，它们都是独一无二的：

但是，enableEdit（）函数在单击任何单元格后返回3，3（我猜是3，因为如果在循环之后输入console.log，这与我得到的值相同），这就是我的问题。

那么我做错了什么？为什么我没有得到我预期的结果？

Answer 1

乌察帕特尔帮助我明白发生了什么。在每一次迭代之后rowIndex和colIndex的值分别为3、3。我们甚至可以看到，如果我们console.log循环。

所以我所做的只是创建一个新对象并存储不会在那里被触及的数据，如下所示：

    rowValues.forEach(colVal => {
      const indexDat = { rowIndex, colIndex };
      rowData.push(
        <td key={colIndex} onClick={() => this.enableEdit(indexDat)}>
          {colVal}
        </td>
      );
      console.log("row: " + rowIndex + ", column: " + colIndex);
      colIndex++;
    });