Javascript React中生成的表的键定义

我很想知道如何在react中生成一个动态表，但是为我的每一行数据提供适当的键，以便react完成它的神奇工作

下面是我正在做的一个简单表/行生成的示例

const listItems = (row, index) => (
  row.map(item => (
    <td key={item + index}>
      {item}
    </td>
  ))
);

const listRows = (rows) => {
  if (!rows) {
    return [];
  }
  return rows.map((row, index) => {
    const key = row[0] + index;
    return (
      <tr key={key}>
        {listItems(row)}
      </tr>
    );
  });
};
const listHeaderItems = (headers) => {
  if (!headers) {
    return [];
  }
  return headers.map((item, key) => (
    <th key={key}>
      {item}
    </th>
  ));
};

const listItems=（行，索引）=>(
行映射（项=>(
{item}
))
);
常量列表行=（行）=>{
如果（！行）{
返回[]；
}
返回rows.map（（行，索引）=>{
常量键=行[0]+索引；
返回(
{listItems（行）}
);
});
};
常量listHeaderItems=（头）=>{
如果（！头）{
返回[]；
}
返回headers.map（（项，键）=>(
{item}
));
};

这有两个问题：

使用字段值作为键，具有任意、重复和有时为空的值的字段值作为键是次键。反应不好

我对问题1的解决方案产生了一个新问题。使用数组索引值作为键。从eslint的角度来看，这被视为一个禁忌，并且由于性能副作用而被视为一种反模式。 ,

我很想帮助react变得更加神奇，拥有令人敬畏的阴影，但我对如何实现这一点有点困惑

总之：

如何为不可用作键的表数据提供唯一键索引？我个人用于生成键

它生成一系列可以使用的随机键

---

基本上，将所有

key={…}

替换为

key={shortid.generate（）}

一个解决方案是向映射的项添加唯一的ID，并将其用作键

---

使用UUID生成器之类的另一种方法

索引的问题是，如果要修改表（添加行、删除行），则该行为将无法正常工作。但是，如果只是显示数据，使用索引不会有问题，只需重写规则即可。如果您正在创建数据，请向数据中添加一个随机uuid以避免任何问题为每个元素生成GUID。是的，我猜生成uuid可能是一种方法。虽然听起来我需要修改数组中每个项中的每个元素对象。并在某种预处理函数中执行，以使其持久化。这很接近，但属于类似的反模式类别，因为键不会持久化@Justin答案来自问题

中不可用作键的部分

。关于持久性，您是否会更新问题，以提及密钥应该持久化？还有一件事，你能指出我的答案是如何反模式的吗？我读了这篇链接文章，想知道为什么我很乐意澄清这一点。在提到中篇文章时，他提到“每一个这样的项目都应该有一个永久和唯一的属性。”这意味着如果你没有一个持续存在的键，那么你就不允许react做它想要的性能增强，因为你会在每次呈现表时更改键。谢谢@Justin。我感谢你的澄清。由于你的评论很有帮助，我将把这个问题保留下来。让我知道我是否应该删除这个答案。很好，我认为它仍然有用，因为有些人仍然会考虑走这条路。谢谢你的意见！