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

Posted 2023-02-22

【中文标题】React - 单击表上的数据返回错误的行和列索引

【英文标题】：React - click data on table returns wrong index of row and column

【发布时间】：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？ ***.com/questions/40044861/… 从这个链接来看，他们正在做类似的事情并且很成功，对吗？他正在为键和 onClick 参数使用一些任意的索引值。

您已经分别在forEach 之外定义了rowIndex 和colIndex，并且在每次迭代中您将它们增加1。所以在您的函数enableEdit rowIndex 和colIndex都作为 3 传递。控制台日志显示正确的值，因为它们是在迭代期间打印的，键也是如此。

@UtsavPatel 哦，现在我明白了。 onClick 事件不会在每次迭代时都附加到它，对吗？

很高兴你得到它！

【参考方案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++;
    );