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

news/2024/7/15 19:07:43 标签: react.js, antd

错误信息: 

 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解决 。


http://www.niftyadmin.cn/n/1557391.html

相关文章

[C++中的C_str()函数用法]

http://blog.csdn.net/nancy_m/article/details/7583550 char c[20];string s "1234";strcpy(c, s.c_str());printf("%s",c);//printf("\n%d",result); 输出 1234

谷歌浏览器禁用 javascript 以及 控制台使用

前言&#xff1a; 有的时候调试&#xff0c;需要禁用js 那我们可以 在浏览器里禁用。 方法&#xff1a; 方法一&#xff1a;设置页面 设置 1. 浏览器输入 chrome://settings/ 或者 点击 浏览器右上角 三个点 点击设置 2. 隐私设置和安全性 3. 网站设置 - 内容里 找到 javaS…

[iOS ] [[NSArray new] makeObjectsPerformSelector:@selector(#selector#)];

[[NSArray new] makeObjectsPerformSelector:selector(<#selector#>)];数组中的每个元素 都去 调用select方法器中的方法! 比如 [self.view.subviews makeObjectsPerformSelector:selector(removeFromSuperview)];

gitlab与jenkins利用webhook自动构建

Jenkins利用GitLab Webhook触发代码提交自动构建任务2017年10月27日 11:47:54 阅读数&#xff1a;682更多个人分类&#xff1a; JenkinsJenkins上安装下图所示插件Jenkins构建触发器配置如下&#xff1a;GitLab配置如下&#xff1a;项目&#xff08;test&#xff09;——设置&a…

vue 报 Cannot read property ‘prototype‘ of undefined

报错信息&#xff1a; Cannot read property prototype of undefined 这个错 可能是 js 引入顺序问题造成的 也有可能是 引入 elemen-ui造成的 。还有可能是 其它 问题造成的。 vue3 需要引入 element-plus &#xff0c;引入 element-ui 也会报这个错 引入顺序问题&#xff…

[iOS 字符串] oc字符串与c字符串互转

一、C字符串转OC字符串 const char *cString "This is a C string";//动态方法NSString *ocString1 [[NSString alloc] initWithUTF8String:cString];NSString *ocString2 [[NSString alloc] initWithCString:cString encoding:NSUTF8StringEncoding];NSString *o…

网络流量监控工具与分析Ntop和Ntopng

为什么80%的码农都做不了架构师&#xff1f;>>> Step1:安装Ntop所需要的开发库及软件 yum install cairo-devel libxml2-devel pango-devel pango libpng-devel freetype freetype-devel libart_lgpl-devel libpcap-devel libpng gdbm gd gettext glib zlib libxml…

vue.js cdn 引入(cdn地址总结)

vue 2 &#xff1a; 对于制作原型或学习&#xff0c;你可以这样使用最新版本&#xff1a; <script src"https://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js"></script> 对于生产环境&#xff0c;我们推荐链接到一个明确的版本号和构建文件&#xff…