Реагировать - данные клика по таблице возвращают неверный индекс строки и столбца

Question

Я пишу простой набор данных с использованием реагирования. После нажатия на ячейку таблицы мне нужна функция, чтобы узнать точный индекс строки и индекс столбца этого. В моем случае у меня есть таблица 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

УтсавПатель очень помог мне понять, что произошло.После итерации 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++;
    });