zoukankan      html  css  js  c++  java
  • antd里面的Table渲染多出来数据问题

    最近发现个问题,就是table渲染的时候竟然会多出来一条上次的数据,关键在render渲染前还打印了数据是对的,但是一看页面傻眼了,然后发现了这是antd的一个bug,记录下,希望帮我一样遇到这样问题的人。

    按照 React 的规范,所有的组件数组必须绑定 key。在 Table 中,dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。最后发现是由于设置的rowKey不是唯一的问题造成了此bug.

    说到这我们来说说key的作用吧。

    react中的key属性,它是一个特殊的属性,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利用key来识别组件,他是一种身份标识,就像每个人有一个身份证来做辨识一样。每个key 对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建
    

    key值相同

    如果两个元素是相同的key,且满足第一点元素类型相同, 若元素属性有所变化,则React只更新组件对应的属性,这种情况下,性能开销会相对较小

    key值不同

    在render函数执行的时候,新旧两个虚拟DOM会进行对比,如果两个元素有不同的key,那么在前后两次渲染中就会被认为是不同的元素,这时候旧的那个元素会被unmount,新的元素会被mount

    【解决办法】

    1.设置rowKey属性,指定值为唯一的字段(确保是唯一不会重复)
    2.设置columns属性的配置中的key(好像主要是第一列),指定值为唯一的字段

    好了问题解决了,我们来梳理下rowKey吧,在开发中使用antd的Table组件时,经常还有warning提示,如下!

    就是托我们的rowKey使用不当导致,设置了rowKey属性,但所指定字段的值不是唯一的或者直接没设置,希望其他朋友也能重视这个问题,以保证代码开发的性能优化和避免像我这样不起眼但是也很意外的bug,祝个人永无bug

  • 相关阅读:
    自动化运维-ansible
    Linux中安装wget命令
    Celery
    SQLAlchemy
    非关系型数据库--MongoDB
    Flask框架
    Redis
    公钥与私钥
    win10 文件扩展名的更改
    if 和 elif 的区别
  • 原文地址:https://www.cnblogs.com/qianyy/p/12750925.html
Copyright © 2011-2022 走看看