React Bootstrap Table 无法创建带有 map 错误的 TableHeaderColumn。在 TableHeaderColumn 中未定义任何键列

Question

当我尝试使用 map 以编程方式创建TableHeaderColumn时，我收到以下错误。

未捕获的错误：错误。在 TableHeaderColumn 中未定义任何键列。 使用 'isKey={true}' 指定版本 0.5.4 之后的唯一列。

如果我不使用映射和硬编码相同的值，一切正常。我通常使用地图作为表格，它通常是一种魅力。我已经尝试过使用和不使用地图key属性，同样的错误。

https://stackoverflow.com/a/25647392/3850405

不起作用：

type TableHeader = {
    dataField: string;
    name: string
    isKey: boolean
}
const crimeTableHeaders: TableHeader[] = [{
    dataField: 'CrimeCode',
    name: 'Brottskod',
    isKey: true,
},
{
    dataField: 'CrimeCodeClearText',
    name: 'Namn',
    isKey: false,
},
{
    dataField: 'Count',
    name: 'Antal',
    isKey: false,
}
]
<BootstrapTable containerStyle={{ marginTop: '10px' }} data={this.props.data} options={this.options} striped={true} hover={true} search multiColumnSearch strictSearch>
    {crimeTableHeaders.map((tableHeader, index) => {
        <TableHeaderColumn key={index} dataField={tableHeader.dataField} isKey={tableHeader.isKey} dataSort={true}>{tableHeader.name}</TableHeaderColumn>
        /*<TableHeaderColumn dataField={tableHeader.dataField} isKey={tableHeader.isKey} dataSort={true}>{tableHeader.name}</TableHeaderColumn>*/
    })}
</BootstrapTable>

工程：

<BootstrapTable containerStyle={{ marginTop: '10px' }} data={this.props.data} options={this.options} striped={true} hover={true} search multiColumnSearch strictSearch>
    <TableHeaderColumn dataField='CrimeCode' isKey={true} dataSort={true}>Brottskod</TableHeaderColumn>
    <TableHeaderColumn dataField='CrimeCodeClearText' isKey={false} dataSort={true}>Namn</TableHeaderColumn>
    <TableHeaderColumn dataField='Count' isKey={false} dataSort={true}>Antal</TableHeaderColumn>
</BootstrapTable>

Answer 1

此 API 是适合您的解决方案React 引导表 - keyField

<BootstrapTable data={ data } keyField='CrimeCode'>
  //Map function 
</BootstrapTable>