尝试呈现 react-bootstrap-table TableHeaderColumn 时无法读取未定义的属性“sortFunc”

Question

我正在尝试使用 map 函数呈现 react-bootstrap-table TableHeaderColumn。收到未定义的错误消息“sortFunc”。如果我对 TableHeaderColumn 进行硬编码，效果很好。

我尝试创建一个虚拟的 sortFunc，因此在渲染之前它不会在 react 元素中未定义。没用。

colhdr = [
[0, 'ID',{'fieldname':'ID','label':'ID', 'iskey':true }],
[1, 'username',{'fieldname':'username','label':'User Name',  'iskey':false}],]


var columnelems = this.state.tablehdr.map ((colhdr) => {
  return (
      <TableHeaderColumn dataAlign='center' dataField={colhdr[1]} key={colhdr[0]} isKey={colhdr[2].iskey}>{colhdr[2].label}</TableHeaderColumn>
  )
});

return (
<div>
  <div class="col-xs-9 col-md-11 ml-5">
  <BootstrapTable bootstrap4 data = { this.state.tabledata }
                  height          = '40%'
                  options         ={ options }
                  selectRow       = { selectRowProp }
                  tableStyle      = { { border: 'LightSlateGrey 2.5px solid' } }
                  bodyStyle       = { { height: '87%'} }
                  hover
                  scrollTop       = { 'Bottom' }>
          {columnelems}
  </BootstrapTable>
  </div>

如果我用硬编码的 TableHeaderColumn 元素替换 {columnelems}，它可以正常工作。

Answer 1

我今天遇到了完全相同的问题，这是因为我传递给 BootstrapTable 的 options 属性是错误的。我的选择是：

options = {
  defaultSortName: 'foo',
  defaultSortOrder: 'asc',
};

但是foo 在我传递给表的对象中不存在，导致此错误。