AntD使用Table表单无key报错

最新推荐文章于 2024-05-15 11:26:12 发布
最新推荐文章于 2024-05-15 11:26:12 发布
阅读量2k 收藏 9
点赞数 3
分类专栏： React 文章标签： antd react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40138556/article/details/110239937
版权
在使用AntD的Table组件时，如果接口数据缺少key或id，会导致'Each child in a list should have a unique “key” prop.'的警告。解决方法包括：请求后端提供key或id，或者前端自己在dataSource中添加唯一的key。
摘要由CSDN通过智能技术生成

问题

AntD的Table表单是我经常使用的一个组件，在使用的时候经常会遇到以下几种key缺失问题：

  • 接口没有传key、id
  • 接口传了id但未转换为key
  • 接口传的id不唯一（一般传了就会唯一）

导致以下报错：

Warning: Each child in a list should have a unique “key” prop.

解决办法

方法一
找后端同学，传key！或者传id！！
传key后直接获取dataSource的值就行了；传id需要前端处理一下，在table组件中加个rowkey。

<Table
	columns={
   columns}
	dataSource={
   dataSource}
	rowkey={
   dataSource
最低0.47元/天 解锁文章
莉兹Liz
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd-table-react.zip
07-13
要实现首行和首列固定，antd-table 使用了 `fixed` 属性来指定需要固定的列或者行。在表格的列配置（columns）中，可以设置 `fixed` 为 `'left'` 或 `'right'` 来固定列，对于固定首行，可以通过在数据源...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
【antd】Table的rowKey设置后仍warning警告key重复的原因
hzxOnlineOk的博客
12-28 861
ant Table的rowKey设置后仍warning警告key重复的原因。
ant design-vue的table表格添加rowkey的三种方式
nyf_unknow的博客
03-30 8622
项目场景： 知识产权模块展示表格数据 问题描述 控制台给出警告 原因分析： 未按照组件要求添加key 属性作为唯一的标识。 解决方案： 方法1：:rowKey=“record=>record.number” <!-- number为表格数据data中的一个属性 --> <a-table ref="table" size="middle" :rowKey="record=>record.number" :colu
antd-vue table如何设置序号
最新发布
偏执的小男孩儿
05-15 861
antd-vue table如何设置序号
React + Antd 填坑（二）使用 Antd 中的 Table 组件 key 值报错
赵花花的博客
07-29 3685
简述 这篇文章主要是讲解React + Antd 项目中遇到的一些常见错误以及解决方案，算是这个系列中的第一篇填坑文。 算是给自己留个笔记，如今分享出来呢，是希望给有需要的同学一些帮助，如有不完善请多多谅解。 问题 问题：Warning: Each child in a list should have a unique “key” prop. 场景：使用 Antd 中的 Table 组件 关于上面这个问题，首先翻译一下，就是说：“ 循环中的每一个子对象必须有一个唯一的Key属性 ”。 之所以出现上面的
antd for vue table组件key报错
weixin_44090753的博客
10-26 593
antd for vue table组件key报错 Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.] Warning: [antdv: Table] Each record in dataSource of table should have a unique key prop, or set rowKey of Table to an u
rowKey问题笔记
haodiaoji9386的博客
03-21 266
Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.] [antdv: Table] Each record in dataSource of table should have a unique `key` prop, or set `rowKey` of Table to an unique primary key, 后台返回的数据中，没有不重复的字...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
antd中table展开行默认展示,且不需要前边的加号操作
01-22
<Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={true} //初始时展开...
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
vue-ant-design a-table 报 row-key Duplicate keys detected: 1. This may cause an update error
字节叔叔
10-21 891
这个错误很明显，是row-key重复了，但是我已经确保了数据里面的key都不重复的。然后才发现column里面也有key，key的值可能和数据的key冲突了。
Ant Design的table组件缺少key值报错解决方案
weixin_41614732的博客
05-26 2690
使用React和Ant Design开发的时候使用table组件进行数据渲染的时候报了这个错 检查后发现，因为我的json数据没有key这个的键值对，所以报了这个错，查看了文档后，发现可以修改rowkey参数改变这个默认值，因为我使用的对象数据里面存在id这个值，所以设置rowKey={“id”}，就可以解决这个问题了 <Table columns={columns} dataSource={tableData} rowKey={"id"}/> ...
关于antd table组件警告key
weixin_48496520的博客
09-09 1400
1:设置了rowKey属性，但所指定字段的值不是唯一的 Warning: Each child in an array or iterator should have a unique "key" prop. 2:没有设置rowKey属性，不过设置了table的columns属性的配置中第一列的key（react所需），但key所指定字段的值不是唯一的 Warning: Each record in table should have a uniquekeyprop,or setrowKeyto an u
Ant Design的table组件报错 Warning: Each child in a list should have a unique “key“ prop.
张三疯zk的博客
02-23 1762
在使用Ant Design的table组件出现了这个错误。而我接收的数据中并没有key这个属性。
【antd】为Table指定key值
你，若盛开的专栏
01-25 3741
antd Table中的key值问题
热门推荐
shenmill的博客
03-21 3万+
问题描述 使用antd中的Table时，一直报这个错 但是我按照antd的文档进行key值的设定了还是报错，所以我重新启了一个项目想看看key值到底什么鬼。 测试代码： import React, { Component } from 'react'; import { Table } from 'antd'; import 'antd/dist/antd.css'; ...
Ant Design Pro ----- Table组件每行操作按钮获取本行id或内容
一目_
07-12 3983
参考：https://segmentfault.com/q/1010000012928771/ const columns = [ { title: 'Action', key: 'action', render: (text, record) => ( <span> <a href="#">Action 一 {record.name...
antd Table组件增加一个自增序号
张木期的博客
11-25 2132
完整代码如下： <a-table :columns="columns" :data-source="students" :pagination="false" rowKey="id" @change="handleTableChange"> <div slot="num" slot-scope="text, record, index">{{ (currentPage - 1) * pageSize + (index + 1) }}</div>
增删改查 antd prov4
07-27
antd prov4 是一个基于 Ant Design 的可视化配置组件库，用于快速搭建数据展示和编辑页面。它提供了一套丰富的组件和配置项，可以方便地完成增删改查功能。 要使用 antd prov4，首先需要安装依赖： ```shell npm install antd-prov4 ``` 然后，在你的代码中引入需要的组件和配置项，进行相应的增删改查操作。以下是一个简单的示例： ```jsx import { Table, Form, Input, Button } from 'antd'; import { useTable, useForm } from 'antd-prov4'; const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', }, ]; const dataSource = [ { key: '1', name: '张三', age: 18, }, { key: '2', name: '李四', age: 20, }, ]; const Example = () => { const { tableProps } = useTable({ dataSource, columns }); const { formProps } = useForm(); return ( <div> <Table {...tableProps} /> <Form {...formProps}> <Form.Item label="姓名" name="name"> <Input /> </Form.Item> <Form.Item label="年龄" name="age"> <Input /> </Form.Item> <Button type="primary" htmlType="submit"> 提交 </Button> </Form> </div> ); }; export default Example; ``` 以上代码中，我们使用了 `Table` 组件来展示数据，使用 `Form` 组件来编辑数据。`useTable` 和 `useForm` 分别是 antd prov4 提供的自定义 Hook，用于处理表格和表单的相关逻辑。 通过以上代码，你可以实现一个简单的增删改查功能页面。具体的操作和配置可以根据你的需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值