ReactJS+和分页动态行扩展问题

Question

我们已经使用了具有分页+可扩展行功能的antd表。单击+图标时，行将展开。内部调用Row details接口，并以展开视图显示。

我们已经使用了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显示展开的行(子表)所需的更改，其中还包括分页。

Answer 1

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

我从antd的ajax和expanded rows示例中组合创建了an example，

  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>
    )
  }