Ant Design的table组件缺少key值报错解决方案

最新推荐文章于 2023-10-23 16:07:36 发布
最新推荐文章于 2023-10-23 16:07:36 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41614732/article/details/106348261
版权

使用React和Ant Design开发的时候使用table组件进行数据渲染的时候报了这个错
在这里插入图片描述
检查后发现，因为我的json数据没有key这个的键值对，所以报了这个错，查看了文档后，发现可以修改rowkey参数改变这个默认值，因为我使用的对象数据里面存在id这个值，所以设置rowKey={“id”}，就可以解决这个问题了

<Table  columns={columns} dataSource={tableData} rowKey={"id"}/>
蓝图null
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AntD使用Table表单无key报错
莉兹Liz的博客
11-27 2023
问题 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。 &
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。@ant-design/pro-table:trophy: Use Ant Design Table like a Pro!DemoAPIpro-table 在 antd 的 table 上进行了一层封装，支持了一些预设...
antd-mobile中picker缺少key解决办法
aliven1的博客
09-08 527
使用的组件是Picker 提示弹出层缺少key,给数据源中的div加上key就好了，官方文档的示例中并没有加key PickerWrapper.defaultProps={ colorValue:['#00FF00'], colors:[ { label: (<div key="#FF0000"> <span style={{ ...colorStyle, backgroundColor: '#FF0000' }
✨antd Design Table组件出现需要添加唯一key值的警告
在人生道路上谦让三分，就能天宽地阔。
08-18 2286
用antd Table组件出现需要添加唯一key值的警告 解决办法： 将 columns 和 dataSource的值都添加上key值
antd-desgin-vue使用下拉选择框时获取不到key值如何解决
Benz_s600的博客
08-31 1506
问题描述:在开发过程中，使用antd-desgin-vue框架中的select选择器时，由于要展示给用户是中文，自己筛选条件时需要其中的key值，而官网给出的change事件中返回的value就是中文，这个并不符合我们筛选条件，所以我们需要获取到每个下拉项的key值 数据结构: 我们需要直接获取到 key值 而value返回的是 我们的name值，所以我们需要做下处理 处理方法: option中的key值就是我们当前选择的一项的key值 ...
ant design vue 组件 Tree
Shiki2147的博客
09-27 1652
ant design vue 组件 Tree 实现效果： 实现代码： <div class="tree"> <a-tree show-icon show-line :load-data="onLoadData1" //展开节点时 @select="treeselect" //点击节点时 @expand="openkeys" :autoExpandParent="false" :tree-data="treeData1" /
ant表格踩坑记录/Note: Tree missing follow keys: ‘undefined‘
qq_41635770的博客
04-17 3591
Note: Tree missing follow keys: 'undefined'
Ant Design的Table组件去除
01-18
在Ant Design的Table组件文档中，排序有三种状态：点击升序、点击降序、取消排序。一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。 首先，我们从官方文档中ctrl+c出一个...
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
react+ant design实现Table的增、删、改的示例代码
10-17
在React开发中，Ant Design是一个非常流行的UI库，它提供了丰富的组件，如表格（Table）、按钮（Button）、输入框（Input）等，用于构建美观且功能强大的用户界面。本示例将详细介绍如何使用React和Ant Design实现...
ant design-vue的table表格添加rowkey的三种方式
nyf_unknow的博客
03-30 8654
项目场景： 知识产权模块展示表格数据 问题描述 控制台给出警告 原因分析： 未按照组件要求添加key 属性作为唯一的标识。 解决方案： 方法1：:rowKey=“record=>record.number” <!-- number为表格数据data中的一个属性 --> <a-table ref="table" size="middle" :rowKey="record=>record.number" :colu
vue antdesig a-tree组件使用详解
热门推荐
ke_sin的博客
03-28 1万+
1.首先页面使用 如果使用a-tree组件时报如图错误，就是没有全局引入注册问题： 问题1解决：在main.js里引入并挂载 import {Tree} from 'ant-design-vue' Vue.use(Tree) 2.数据渲染 一般后端返回的数据和组件文档字段对应不上，所以需要自定义一下字段 <a-tree :tree-data='goodsClassData' :replaceFields='replaceFields'> </a-tre
antd 使用Tree遇见的几个问题
萝卜园
05-23 1万+
注：此内容是笔者在业务中自己遇到的问题，不具有广泛性，请谨慎参考 1.defaultExpandedKeys （defaultxxxxxxxx）等 只会在第一次有，应使用expandedKeys 2.TreeNode添加dataRef 获取子节点数据； eg: 3.key ke值应该唯一（antd 常识） 4.expandedKeys 设置此参数后，目录的小三...
antd的tree组件的使用与坑
最新发布
KisJLLLLLL的博客
10-23 862
每次更新或者添加 重新加载子节点 异步加载会消失，我发现是因为重新设置了treedate，如果要整个树形结构重新加载，需要把选中节点的状态清空在设置，如果是子节点，要用组件自带的loadData函数来获取子节点下面的数据，重新设置treedate会自节点的异步加载会消失。由于没有找到文档中有操作状态的函数，这边我是使用挂载来清除状态。下面是整体代码，清空状态需要看个人项目需求在哪边加👇。
【Ant Design】Tree树形控件踩坑记录
无限循环
09-13 5374
Ant Design树形控件错误：Warning: Tree node must have a certain key: [undefined]
ant design tree 二次点开，展开图标消失问题解决
qq_43613029的博客
08-27 1025
解决方法，再次更新组件 <a-tree :key="treeKey" :load-data="onLoadData" :tree-data="treeData" @select="treeSelect" :defaultSelectedKeys="defaultSelectedKeys" :defaultExpandedKeys="defaultExpandedKeys"
ant design vue中menu组件递归渲染报错解决
牛先森家的博客
06-28 2001
ant design vue中menu组件递归渲染报错解决
Ant Design 中Tree踩坑
在那山的那边海的那边，有一群程序猿
06-10 1万+
Tree中的api属性有一个defaultExpandAll 这个属性只在第一次渲染的时候有效，也就是说用户刷新页面后或者在这个页面操作完这个组件后重新渲染的时候，这个值将不会有效。 解决办法： expandedKeys={help.treeIdData} onExpand={this.onExpand} 使用expandedKeys属性和onExpand事件进行数据的可控操作 初...
ant design table组件去掉回车排序
09-01
要去掉 ant design table 组件的回车排序功能，可以通过自定义sorter来实现。 首先，需要在columns中定义每一列的sorter属性，并设置为false，这样可以禁用默认的排序功能。 然后，通过监听键盘事件，在按下回车键时，阻止默认的排序操作。可以使用onKeyUp或onKeyPress事件绑定一个函数来实现。 在该函数中，判断按下的键是否为回车键（keyCode为13），如果是，则阻止事件的默认行为，从而禁用排序操作。 具体代码如下： ``` import React from 'react'; import { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', sorter: false, // 禁用默认排序功能 }, { title: 'Age', dataIndex: 'age', sorter: false, // 禁用默认排序功能 }, { title: 'Address', dataIndex: 'address', sorter: false, // 禁用默认排序功能 }, ]; const data = [ { key: '1', name: 'John Doe', age: 25, address: 'New York' }, { key: '2', name: 'Jane Smith', age: 30, address: 'London' }, { key: '3', name: 'Tom Johnson', age: 35, address: 'Paris' }, ]; class MyTable extends React.Component { handleKeyUp = (e) => { if (e.keyCode === 13) { // 按下回车键 e.preventDefault(); // 阻止默认行为 } } render() { return ( <Table columns={columns} dataSource={data} onKeyPress={this.handleKeyUp} /> ); } } export default MyTable; ``` 通过以上代码，我们成功禁用了 ant design table 组件的回车排序功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值