ANTD表的控制台警告。警告：列表中的每个孩子都应具有独特的“键”。支柱

Question

观察控制台中以下警告。在调试时，可以观察到警告来自ANTD表组件。

所有代码都附加在下面。

表组件

 <Table
    columns={columns}
    dataSource={dataSource}
  />

dataSource

const dataSource = [
  {
    id: "1",
    todo: "todo-1",
    description: "description-1",
    status: false
  },
  {
    id: "2",
    todo: "todo-2",
    description: "description-2",
    status: true
  },
  {
    id: "3",
    todo: "todo-3",
    description: "description-3",
    status: false
  }
];

列

const columns = [
  {
    title: "Todo",
    dataIndex: "todo",
    key: "todo"
  },
  {
    title: "Description",
    dataIndex: "description",
    key: "description"
  },
  {
    title: "Status",
    dataIndex: "status",
    key: "status",
    render: (tag) => (
      <>
        <Tag color={tag ? "green" : "red"}>{tag ? "Done" : "Pending"}</Tag>
      </>
    )
  }
];

Answer 1

两种方法！

警告是因为dataSource中的每个行（todo）没有唯一的属性键。

您可以通过选择以下方式之一来解决此问题。

1. 添加一个属性键带有数组数据源中每个对象的唯一值。

   中的每个对象。

2. 在数据源中，属性id似乎是每一行唯一的。
   您需要使表组件考虑id属性以识别特定行。

您可以通过将Rowkey Prop传递到表组件来做到这一点。

  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey={(record) => record.id}
  />

注意：此处ID是唯一的。因此代码如上所述。如果唯一值与另一个密钥索引一起使用，则需要相应地更改代码。 （如下）

rowKey={(record) => record.index}

Answer 2

这样做的第三种方法（如果您没有ID或索引属性）：

datasource={props.data}
rowKey={record => props.data.indexOf(record)}

prop.data是一个数组。