antd嵌套表格遇到的小问题

素颜马尾好姑娘i 2021-09-07 22:52 1040阅读 0赞

antd的api中嵌套表格的数据在**expandedRowRend**er方法中，但是使用的时候不能在这个方法中进行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导致的问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/985a9931345e43d586e683208a5bd360.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1]: /images/20210813/2833a7afdfa14156bccb846ea906db15.png