ant table表格嵌套 报错:Cannot update a component while rendering a different component

在使用ant写一个嵌套有子表格的表格时,遇到一个问题。每当点击展开二级子表格时,直接报错Cannot update a component while rendering a different component。

搜了一下发现是,获取数据的代码写在了expandedRowRender函数内,函数中又操作了props或者setState,导致组件从新渲染,而因为子表格已经展开了,expandedRowRender={expandedRowRender}会直接触发,会再次执行props或者setState的操作,再次导致组件渲染,而再次渲染后又会……

所以不要把带有操作setState和props的内容写在expandedRowRender触发的函数内,但是setState或者props又必须要执行,这时,你可以选择使用onExpand={ (expanded,record) => { } }配合expandedRowRender。

onExpand只会在点击展开和合并的按钮时触发,重新渲染组件并不会触发,所以把setState或者props的操作写在这个函数里。其中expanded是一个布尔值,true代表开启,false代表合并。record是展开行的信息。

但是使用onExpand又会导致每个展开的子表格内容都相同,但是利用expanded,record可以很轻松的解决这个问题,设计一个数组对象用来存储每个展开行的子表格数据。

expanded为true代表展开,就执行push(),别忘了把record中能够唯一标识该展开行的标志页存到该对象数组中。expanded为false时代表合并,就利用record找到是哪一行合并了,执行splice()把他的子表格数据删了就行。

推荐看一下:https://blog.csdn.net/z3y3m3/article/details/86602192

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值