Javascript React引导表无法创建TableHeaderColumn,映射错误。TableHeaderColumn中未定义任何键列

Javascript React引导表无法创建TableHeaderColumn,映射错误。TableHeaderColumn中未定义任何键列,javascript,reactjs,typescript,react-bootstrap-table,Javascript,Reactjs,Typescript,React Bootstrap Table,当我尝试使用map以编程方式创建TableHeaderColumn时,出现以下错误 未捕获错误:错误。TableHeaderColumn中未定义任何键列。 使用'isKey={true}'在版本0.5.4之后指定一个唯一的列 如果我不使用map和硬代码,那么所有的值都是一样的。我通常把地图用在桌子上,它通常是一种魅力。我尝试过使用和不使用map的key属性,同样的错误 不起作用: type TableHeader = { dataField: string; name: stri

当我尝试使用map以编程方式创建TableHeaderColumn时,出现以下错误

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

如果我不使用map和硬代码,那么所有的值都是一样的。我通常把地图用在桌子上,它通常是一种魅力。我尝试过使用和不使用map的key属性,同样的错误

不起作用:

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>

此API是您的解决方案


您不是从地图上回来的。@bennygenel这就是为什么您应该在编程14小时后停止。。。非常感谢你!没问题。很高兴我能帮忙。如果你愿意,你可以删除这个问题,因为它是一个印刷错误。@bennygenel你要快了,现在看到了。如果我在我的arrow函数之后删除了{},我也不需要返回。删除{}等同于执行{return'something}这是ES6的快捷方式。欢迎提供指向解决方案的链接,但请确保您的答案在没有它的情况下是有用的:这样您的其他用户就会知道它是什么以及它为什么在那里,然后引用你链接到的页面最相关的部分,以防目标页面不可用。
<BootstrapTable data={ data } keyField='CrimeCode'>
  //Map function 
</BootstrapTable>