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

数据： Picture from the console

实时网站：https://nhl-321-pointsystem.herokuapp.com/

Answer 1

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

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

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

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

加号点-应用reformat函数后，与以前的解决方案不同，您无需为每一列都使用formatter。

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

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

React-Bootstrap-Table-表中仅一行数据

1 个答案: