Javascript 警告控制台：列表中的每个子级都应具有唯一的“；键”；代码react.js中表中的prop

我想更正控制台中的警告“列表中的每个孩子都应该有一个唯一的”键“道具”。我尝试在中添加道具“rowkey”、“key”，但问题仍然存在

//***************************** Code ********************************//
class TableOfState extends React.Component {
render() {
const states = this.props.statesList;
const columns = [
//**************** I'm trying to add a column "id" *************************//
{
dataIndex: 'id',
key: 'id',
},
{
title: 'name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Color',
dataIndex: 'color',
key: 'color',
},
];
return (
<div>
<Widget>
  <Row>
      <Table
    //******************* The two solutions that I tried *******************//
        // key={states.id}
        // id={states.id}
        // rowkey={states.idDept}
        dataSource={states}
        columns={columns}
        pagination={true}
        className="gx-table-responsive"
        style={{ width: "100%" }}
      />

       </Row>
    </Widget>
  </div>
)
}
}

/***************************代码********************************//
类TableOfState扩展了React.Component{
render（）{
const states=this.props.statesList；
常量列=[
//****************我正在尝试添加一列“id”*************************//
{
数据索引：“id”，
键：“id”，
},
{
标题：“姓名”，
数据索引：“名称”，
关键字：“名称”，
},
{
标题：“颜色”，
数据索引：“颜色”，
键：'颜色'，
},
];
返回(
)
}
}

控制台上的警告如下：

---

您需要为所有数据项添加具有唯一值的“关键”道具

const dataSource = [
  {
    key: '1',
    id: 1,
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    id: 2,
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
];

或者，如果您的项已经具有唯一键（例如“id”），则通过rowKey属性为表组件指定它：

<Table dataSource={dataSource} rowKey="id" ... />;

；

密钥必须转到Parentry设置数据集的唯一密钥字段