在React中生成的表的键定义

Question

我很想知道如何在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>
  ));
};

与此有关的2个问题：

1. 使用字段值作为键，具有任意，重复且有时为空值的值低于键。没有反应。
2. 我对问题1的解决方案产生了一个新问题。使用数组索引值作为键。从大体上的角度来看，这是不可以的，并且由于性能方面的副作用而被认为是反模式。 no-array-index-key，React array index anti pattern

我很乐意通过阴影幕的超凡效果帮助做出更神奇的反应，但是我对如何实现这一目标感到有些困惑。

总结：

如何为没有用做键的表数据提供唯一的键索引？

Answer 1

我个人使用short-id生成密钥。

它会生成一系列可以使用的随机密钥。

基本上用key={...}替换所有key={shortid.generate()}

Answer 2

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

另一种使用UUID生成器之类的东西