时间戳

首页 > 解决方案 > React-Bootstrap-Table-Next 表中只有一行数据

node.js - React-Bootstrap-Table-Next 表中只有一行数据

问题描述

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

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

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/

标签： node.jsreactjsnpmreact-bootstrap-table

解决方案

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

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

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

类似于我在此处reformat可用的沙盒中创建的函数。

加分- 应用该reformat功能后，与以前的解决方案不同，您不需要formatter每一列。

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

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

推荐阅读