[英]React Bootstrap Table can't create TableHeaderColumn with map Error. No any key column defined in TableHeaderColumn
I get the following error when I try to create TableHeaderColumn
programatically using map. 当我尝试使用map编程创建
TableHeaderColumn
时,出现以下错误。
Uncaught Error: Error.
未捕获的错误:错误。 No any key column defined in TableHeaderColumn.
在TableHeaderColumn中没有定义任何键列。 Use 'isKey={true}' to specify a unique column after version 0.5.4.
在版本0.5.4之后,使用'isKey = {true}'指定唯一列。
If I don't use map and hard code the same values everything works. 如果我不使用相同的值和硬代码,则一切正常。 I usually use map for tables and it usually works as a charm.
我通常将地图用于表格,并且通常将其作为一种魅力。 I have tried with and without
key
property for map, same error. 我尝试使用和不使用地图的
key
属性,同样的错误。
https://stackoverflow.com/a/25647392/3850405 https://stackoverflow.com/a/25647392/3850405
Does not work: 不起作用:
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>
Works: 作品:
<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>
This API is the solution for you React bootstrap table - keyField 这个API是您的React Bootstrap表-keyField的解决方案
<BootstrapTable data={ data } keyField='CrimeCode'>
//Map function
</BootstrapTable>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.