根据React文档，每一行/项都应该有一个唯一的键。

键帮助React识别哪些项已经更改、添加或删除。

就我个人而言，我更喜欢使用加密接口来生成一个随机UUID: (crypto在vanilla-js中是内置的)

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
  <li key={crypto.randomUUID()}>item {number}
  </li>
);

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
        return this.props.columns.map(function(c, i) {
          return <td key={i}>{this.props.data[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr>{ td(this.props.item) }</tr>
    )
  }
});

这样问题就解决了。

您应该为tbody where的每个子键使用唯一的值

该值不能与其同级值相同 不应该在渲染之间改变

例如，键值可以是数据库id或UUID(通用唯一标识符)。

这里的键是手动处理的:

<tbody>
  {rows.map((row) => <ObjectRow key={row.uuid} />)}
</tbody>

你也可以让React使用React. children . toarray来处理键

<tbody>
  {React.Children.toArray(rows.map((row) => <ObjectRow />))}
</tbody>

这是一个警告，但解决这个问题将使反应渲染更快，

这是因为React需要唯一地标识列表中的每个项。假设在React Virtual DOM中，如果列表中某个元素的状态发生了变化，那么React需要找出哪个元素发生了变化，以及它需要在DOM中的哪个位置发生变化，以便浏览器的DOM与React Virtual DOM保持同步。

作为解决方案，只需为每个li标记引入一个键属性。该键对于每个元素都应该是唯一的值。

使用UUID lib创建一个随机UUID: 执行NPM install uuid命令

import { v4 as uuid } from "uuid";

array.map((item) =>
  <li key={uuid()}>{item}
  </li>
);

在我的例子中，将id设置为tag

<tbody key={i}>

问题解决了。