ReactJS + Antd - проблема расширения динамического ряда страниц

Question

Мы использовали таблицу 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 +И где нумерация страниц также включена.

Answer 1

Ваша проблема может быть связана с тем, как antd считает строки в разбитой на страницы таблице. Индекс сбрасывается сам на каждой странице, поэтому для правильного расчета индекса необходимо добавить номер страницы в индекс.

Я создал пример , объединенный из примеров antd для ajax и расширенных строк ,

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