react-antd Table警告(Each record in dataSource of table should have a unique `key` prop...)

错误信息: 

 1.设置rowKey属性,也未设置columns属性的配置中第一列的key(react所需)

Warning: Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary key

Warning:[antd:Table] Each record in dataSource of table should have a unique `key` prop, or set `rowKey` of Table to an unique primary key.

2.设置了rowKey属性,但所指定字段的值不是唯一的

Warning: Each child in an array or iterator should have a unique "key" prop.

3.未设置rowKey属性,不过设置了columns属性的配置中第一列的key(react所需),但key所指定字段的值不是唯一的

Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

解决方案:

方法一

 官网 也给了 解决方案:

就是加一个 rowKey即可 不过 这个 值必须是 唯一的

// 比如你的数据主键是 uid
return <Table rowKey="uid" />;
// 或
return <Table rowKey={record => record.uid} />;

表格 Table - Ant Design 注意事项

方法二

或者 设置columns属性的配置中的key(主要是第一列),指定值为唯一的字段

看官网的例子代码 数据里 有个 key属性 。所以给你的数据里加一个 key属性 就可以了 。

注意只能是 key是属性 换成 id 也不行(我试了一下不行,也有可能 我试错了,有好的解决方案可以 告诉我)

 表格 Table - Ant Design

补充:

还有可能 出现这个错误:

Warning:Encountered two children with the same key,`ts`.Keys should  be unique so that components maintain their identity across updates.Non-unique keys may cause children to be duplicated any/or omitted -the behavior is unsupported and could change in a future version. 

报错信息意思:

警告:遇到两个具有相同键“ts”的子级。密钥应该是唯一的,以便组件在更新期间保持其身份。非唯一键可能会导致复制或忽略子项-不支持该行为,并且可能会在将来的版本中更改。

顾名思义 就是 key 重复了,只要把 key设置成唯一值 。

如果没有 可以使用:

rowKey={(r,i)=>{
   return i.toString()
}}

 如果 警告信息 看不懂 可以 用翻译软件 翻译一下 比如 百度翻译

总结:

所以 我推荐直接 加 rowKey解决 。

猜你喜欢

转载自blog.csdn.net/weixin_44058725/article/details/124480637