Ant Design rowKey导致的诡异重复、无效数据问题

勤奋不是嘴上说说而已,而是实际的行动,在勤奋的苦度中持之以恒,永不退却。业精于勤,荒于嬉;行成于思,毁于随。在人生的仕途上,我们毫不迟疑地选择勤奋,她是几乎于世界上一切成就的催产婆。只要我们拥着勤奋去思考,拥着勤奋的手去耕耘,用抱勤奋的心去对待工作,浪迹红尘而坚韧不拔,那么,我们的生命就会绽放火花,让人生的时光更加的闪亮而精彩。

导读:本篇文章讲解 Ant Design rowKey导致的诡异重复、无效数据问题,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

概述

作为一个上手极其简单,但具有高颜值的组件,Ant Design在前端开发中占据着一席之地,成为很多前端开发者的首选。

官网参考Ant Design Table,本文记录在使用时遇到的问题和踩过的坑。

问题

本文记录在使用React Ant Design的table组件时,遇到的两个表象相同,但是根源不太相同的问题。

问题1

一个简单的列表页,输入主键ID搜索,却展示出来两条数据。通过查看接口,明明只返回一条数据。怎么会展示两条数据呢?
在这里插入图片描述
并且下面这一条数据,无法操作。这也正说明,后端返回的数据里面是不包含这一条。
在这里插入图片描述
此时如果指定主键输入1281搜索,发现上面列表页的问题稳定复现:
在这里插入图片描述
问题定位为前端,前端页面展示列表时使用的Table组件为使用React Ant Design Table。鉴于自己是个半吊子前端开发。请教其他比较资深的前端同事,让检查一下rowKey

<section className={styles.listForm}>
  <ViTable
    className={styles.datasetTable}
    rowKey={(record: DatasetItem) => record.datasetId + (record.cronExpStatus ?? 'n')}
    columns={columns}
    dataSource={datasetState.list}
    loading={listLoading}
    pagination={{
      position: ['bottomCenter'],
      total: datasetState.pagination?.total,
      showSizeChanger:true,
      showQuickJumper:true,
      showTotal:(total: any) => (`${total}`),
    }}
    onChange={handleTableChange}
  />
</section>

发现这里定义的rowKey居然和cronExpStatus有关联,理论上一条数据只有一个cronExpStatus,两者拼接没有任何实际的业务意义。rowKey应该是后端返回数据里面,表示主键ID那一个字段。

改成如下:rowKey={(record: DatasetItem) => record.datasetId},问题得到修复。

问题2

半个月后,另一个列表页再次出现类似问题:
在这里插入图片描述
相同问题,右侧的操作按钮点击没有反应。

第一反应就是去检查一下前端代码,使用正确的rowKey,没有问题:

rowKey={(record: any) => record.id}

再次请教资深前端开发。尝试如下解决方案:

rowKey={(record: any, index: number) => `${record.id}${index}`}

问题解决。

结论

rowKey的定义:Row's unique key, could be a string or function that returns a string,类型是string | function(record): string

  1. 维护他人随手乱写随手提交的代码,真痛苦。这种无意之中的脏代码,让后来的维护者,不知道要浪费多少时间去排查问题。
  2. 不吝请教。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/142149.html

(0)

及时掌握行业动态,欢迎加入几百人的后端技术交流群:


相关推荐

发表回复

登录后才能评论