antd嵌套表格遇到的小问题

antd的api中嵌套表格的数据在expandedRowRender方法中,但是使用的时候不能在这个方法中进行ajax请求,expandedRowRender 实际上是在 Table 组件的 render 方法中调用的,React render 中用 ajax 会造成重复调用的问题,ajax -> setState -> render -> ajax-> setState -> render,循环往复。在expandedRowRender中进行render返回标签在onExpand中拿着父级的id去请求子表格的数据

 const expandedRowRender = (record) => {
        return <Table 
                 columns={columnsChildren} 
                 dataSource={childrenData[record.id]}         
                 pagination={false} 
                 rowKey={record=>record.id} />;
 };
const onExpand = (expanded, record) =>{
    childrenList({
        id:record.id
      }).then(res => {
       setChildrenData({...childrenData,[record.id]:res.data})
})
    

最开始写的时候直接将子表格的数据作为children字段返回了,不用做二次请求,但是作为children字段返回在expandedRowRender中做render的时候会出现问题,点击展开父级会增加(子级的那几个数据)就是render导致的问题

用其他字段就可以的,用children就会出现这个问题 具体不知道原因,估计是children字段在antd组件本身做了处理,不清楚

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值