关键Javascript的问题

我有一个代码，其中是一个表格，但他们给了我一些观察，我必须做，但我不知道如何做，我正在做的是在一本故事书中，以防他们看到不同的东西，即使是一个普通的组件，我想这就是情况

import React from "react"
import PropTypes from "prop-types"

export function Table({ header, content }) {
  return (
    <table className="text-sm">
      <thead className="h-3" style={{ background: "#F1F1F1" }}>
        <tr className="h-3 border-b" style={{ borderColor: "#E0E0E0" }}>
          {header.map((head, index) => (
            <th key={index} className="px-3 py-3 font-light text-left">
              {head}
            </th>
          ))}
        </tr>
      </thead>
      {content.map((row, index) => (
        <tr
          className="h-3 border-b"
          key={index}
          style={{ borderColor: "#E0E0E0" }}>
          {row.map((cell, i) => (
            <td className="px-3 py-3" key={i}>
              {cell}
            </td>
          ))}
        </tr>
      ))}
    </table>
  )
}

Table.propTypes = {
  children: PropTypes.string,
  header: PropTypes.array,
  content: PropTypes.array
}
export default Table

从“React”导入React
从“道具类型”导入道具类型
导出函数表（{header，content}）{
返回(
{header.map（（head，index）=>(
{head}
))}
{content.map（（行，索引）=>(
{row.map（（单元格，i）=>(
{cell}
))}
))}
)
}
表1.2.2类型={
子项：PropTypes.string，
标题：PropTypes.array，
内容：PropTypes.array
}
导出默认表

我提出了两项意见，分别是：

1.不能将索引用作组件的键，它会导致直接父级“行”出现问题

2.索引不用作组件“键”

---

检查标题和行是否具有唯一属性，如

id

，如果有，可以将其用作键，否则，如果它们具有任何类型的区分值，如

name

，则可以与

索引

组合生成键。比如

<tr key={`${header.name}-${index}`} />

---

这将使它在大多数情况下都是唯一的。

为什么使用索引作为键是个坏主意

实际上，找到一把钥匙通常并不难。要显示的元素可能已经具有唯一ID，因此该键可以来自您的数据：

{item.name} 如果不是这样，您可以向模型中添加一个新的ID属性，或者对内容的某些部分进行散列以生成密钥。密钥只需在其同级中唯一，而不是全局唯一。 最后，您可以将数组中的项索引作为键传递。如果项目从未重新排序，这可以很好地工作，但重新排序会很慢

当索引用作键时，重新排序还会导致组件状态出现问题。组件实例将根据其键进行更新和重用。如果键是索引，则移动项会更改它。因此，诸如非受控输入之类的组件状态可能会以意外的方式混淆和更新

---

你知道，你实际上可以在任何组件上使用一个键，即使它不是列表中的子组件。试试看，换一下钥匙。然后呢？该组件将重新招标、销毁并从头开始重新创建。Read使用密钥来跟踪更改的内容，如果在列表中重新排序组件，密钥将更改，因此反应将考虑组件以某种方式改变。所以，只要你的项目可以在列表中重新排序，就不要使用索引！也不要合并它们。通常，您的项目有ID，请使用它们。或者使用任何特定于每个项目的、保证唯一的东西（在兄弟姐妹之间，而不是在全球范围内）。使用索引作为最后手段。

请参见此处，您可以根据对象的内容或标题数组传递唯一值，而不是传递索引。类似于head.property和row.id的东西如果它的唯一性不是关于唯一性，它说不要使用索引，所以如果你将它们合并，元素被重新排序，你仍然会遇到同样的问题。