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

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

UtsavPatel帮助我了解了所发生的一切。在ForEach迭代之后，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++;
    });