来自 antd 表的控制台警告。警告：列表中的每个子项都应该有一个唯一的“key”道具

Question

观察控制台中的以下警告。调试时发现警告来自 antd 表组件。

所有代码附在下面。

表组件

 <Table
    columns={columns}
    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

2种方法可以做到这一点！

警告是因为每一行（todo）都dataSource没有唯一的属性key。

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

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

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

您可以通过将 rowKey 属性传递给表组件来完成此操作。

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

注：这里id是独一无二的。所以代码如上。如果唯一值与另一个键相关，index那么您需要相应地更改代码。（如下）

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