React-Bootstrap-Table-Next 表中只有一行数据答案

【问题标题】：React-Bootstrap-Table-Next Only One Row of Data in TableReact-Bootstrap-Table-Next 表中只有一行数据
【发布时间】：2019-04-26 23:36:05
【问题描述】：

我正在尝试为我的网站创建一个表格，但由于某种原因它只显示第一行数据。

这就是我格式化数据列的方式：

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

数据： Picture from the console

现场直播：https://nhl-321-pointsystem.herokuapp.com/

【问题讨论】：

标签： node.js reactjs npm react-bootstrap-table

【解决方案1】：

我查看了您对/api/items API 调用的网络响应，发现数据仅包含一项。这是您在呈现表格时看到单行的原因之一。

请注意，问题的另一个原因是，react-bootstrap-table-next 键 data 接受单个 Array 对象。 而不是单个对象的数组。

您应该重新排列您的数据，以便数组中的所有项目都显示关键“团队”。其余的列标题值（例如 current_Rank）可用于每个like。

类似于我在沙盒中创建的reformat 函数here。

加分项 - 应用 reformat 函数后，与之前的解决方案不同，您不需要为每一列提供 formatter。

替代但推荐的解决方案是仅从 API 端点发送格式化响应，而不是重新解析和创建新对象以满足 UI 的需求。

沙盒链接 - https://codesandbox.io/embed/32vl4x4oj6

【讨论】：