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

【问题标题】：React - click data on table returns wrong index of row and columnReact - 单击表上的数据返回错误的行和列索引
【发布时间】：2019-08-14 07:22:23
【问题描述】：

我正在使用 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 时得到的值相同） em> ，这是我的问题。

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

【问题讨论】：

当您使用forEach 进行迭代时，每次迭代都会增加您的列和行索引。所以值3,3 是预期的。您可能应该将您的 bodyRows 移动到本地反应状态，其中每个单元格都有自己的行和列索引。目前，您的 this.enableEdit(rowIndex, colIndex) 发送覆盖的索引值。
@UtsavPatel 对不起，我似乎不明白。为什么key是唯一的，console log是对的，而onClick的参数是post-iteration？ stackoverflow.com/questions/40044861/… 从这个链接来看，他们正在做类似的事情并且很成功，对吗？他正在为键和 onClick 参数使用一些任意的索引值。
您已经分别在forEach 之外定义了rowIndex 和colIndex，并且在每次迭代中您将它们增加1。所以在您的函数enableEdit rowIndex 和colIndex都作为 3 传递。控制台日志显示正确的值，因为它们是在迭代期间打印的，键也是如此。
@UtsavPatel 哦，现在我明白了。 onClick 事件不会在每次迭代时都附加到它，对吗？
很高兴你得到它！

标签： reactjs ecmascript-6

【解决方案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++;
    });

【讨论】：