React-Bootstrap-Table-Next только одна строка данных в таблице

Question

Я пытаюсь создать таблицу для своего веб-сайта, и по какой-то причине она показывает только первую строку данных.

Вот как я форматирую столбцы данных:

const { items } = this.props.item;
// console.log({ items });

// react - bootstrap - table - next
const columns = [{
  dataField: 'team',
  text: 'Team',
  sort: true,
  formatter: (cellContent, row, rowIndex) => (
    Object.values(row.team)[rowIndex]                      
  )      
}, {
  dataField: 'current_Rank',
  text: 'Current Rank',
  sort: true,
  formatter: (cellContent, row, rowIndex) => (
    Object.values(row.current_Rank)[rowIndex]
  )      
}, {
  dataField: 'new_Rank',
  text: '321 Rank',
  sort: true,
  formatter: (cellContent, row, rowIndex) => (
    Object.values(row.new_Rank)[rowIndex]
  )
}];

Вот как я возвращаю таблицу, чтобы она отображала таблицу:

return (
      <BootstrapTable 
        keyField="team"
        data={items}  
        columns={columns}
        striped
        hover />              
    )
  }
}

Данные: Изображение с консоли

Живой сайт:https://nhl -321-pointsystem.herokuapp.com /

Answer 1

Я посмотрел ваш сетевой ответ на /api/items вызов API и обнаружил, что данные содержат только один элемент. Это одна из причин, по которой вы видите одну строку при визуализации таблицы.

Обратите внимание, что еще одна причина проблемы: react-bootstrap-table-next ключ. data принимает один объект Array. А не массив одного объекта .

Вы должны перестроить свои данные , чтобы ключ 'team' присутствовал для всех элементов в массиве. И остальные значения заголовка столбца (например, current_Rank) доступны для каждого подобия.

Что-то вроде reformat функции, которую я создал в песочнице, доступно здесь .

Плюс точка - После применения функции reformat вам не понадобится formatter для каждого столбца в отличие от вашего предыдущего решения.

Альтернативное, но рекомендуемое решение будет отправлять отформатированный ответ только с конечной точки API, вместо повторного анализа и создания нового объекта в соответствии с потребностями пользовательского интерфейса.

Ссылка в песочнице - https://codesandbox.io/embed/32vl4x4oj6