来自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中的每一行(待办事项)都没有唯一的属性key。

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

1. 为数组中的每个对象添加一个具有唯一值的属性key ( dataSource.

)。

这里的

1. 在dataSource中，属性id对于每一行似乎都是唯一的。您需要使表组件考虑id属性来唯一地标识特定的行。

您可以通过向Table组件传递一个rowKey支柱来实现这一点。

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

注意:这里id是唯一的。所以代码和上面一样。如果唯一值使用另一个键index，则需要相应地更改代码。(见下文)

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