在使用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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐