记一次直接修改引用对象导致的bug

60 阅读1分钟

起因:列表的table操作列需要权限控制。有权限时才展示这一列。所以判断权限,有权限时往columns数组中push一个操作列对象。

经过测试一切正常,多个页面都采用了这种方式。上预发环境后其一个页面被发现了问题。就是每次离开这个页面再回去就会多一列操作列。

image.png

问题就出在columns这个数组的位置:

  • 直接放在table组件那个tsx文件中,这样没有问题。
  • 放在其他文件中,但是是个方法,columns(),调用后导出一个columns数组,这样也ok。
  • 放在其他文件中,直接作为一个数组,这样不行,因为是数组是引用传递。

于是使用前深克隆一下 cloneDeep(columns)。