ReactJS+；Antd-分页动态行扩展问题

我们使用了带有分页+可扩展行功能的antd表。单击+图标时，行将展开。在内部，行详细信息api被调用并显示在展开视图中

我们使用了antd扩展行特性，也叫api，它在第一页上运行良好。由于我们还添加了分页功能，所以当检查第二页时，它将不起作用，它仍然显示旧的键记录

onTableRowExpand(expanded, record){
   getChildData(record.id) // service call to fetch child data displayed as expanded row details

   var keys = [];
   if(expanded){
    keys.push(record.id); //  record.id as row key which is coming same across pagination
   }

this.setState({expandedRowKeys: keys});
}

---

我们想知道使用ReactJS+Antd显示扩展行（子表）所需的更改，其中还包括分页。

您的问题可能与Antd对分页表中的行进行计数的方式有关。索引在每一页上都会自动重置，因此必须将页码添加到索引中，才能正确计算索引

我根据antd的例子为和创建了组合

expandRow=（记录、索引）=>{
//通过当前基于0的页码获取id
常量页=（this.state.pagination.current | | 1）-1；
index=10*page+index；//10应该是一个变量。
此.fetchDetails（索引）；
返回(

{this.state.expandRowData[index]？
{JSON.stringify（this.state.expandRowData[index]））
:
（装载…）
}

)
}

您的问题可能与antd对分页表中的行进行计数的方式有关。索引在每一页上都会自动重置，因此必须将页码添加到索引中，才能正确计算索引

我根据antd的例子为和创建了组合

expandRow=（记录、索引）=>{
//通过当前基于0的页码获取id
常量页=（this.state.pagination.current | | 1）-1；
index=10*page+index；//10应该是一个变量。
此.fetchDetails（索引）；
返回(

{this.state.expandRowData[index]？
{JSON.stringify（this.state.expandRowData[index]））
:
（装载…）
}

)
}

表示

expandedRowRender

函数具有以下签名：

函数（记录、索引、缩进、展开）：ReactNode

。似乎您正在使用扩展后的

记录

。您正在使用哪个版本的antd？表示

expandedRowRender

函数具有以下签名：

函数（记录、索引、缩进、展开）：ReactNode

。似乎您正在使用扩展后的

记录

。您正在使用哪个版本的antd？

  expandRow = (record, index) => {
    // get the id by the current 0 based page number
    const page = (this.state.pagination.current || 1) - 1;
    index = 10*page + index; // 10 should be a variable.

    this.fetchDetails(index);
    return (
      <p style={{margin: 5}}>
        {this.state.expandRowData[index] ?
        <span>{ JSON.stringify(this.state.expandRowData[index]) }</span>
        :
        <span>(Loading...)</span>
        }
      </p>
    )
  }