React Bootstrap Table не может создать TableHeaderColumn с ошибкой карты. Никакой ключевой столбец не определен в TableHeaderColumn

Question

Я получаю следующую ошибку при попытке создать TableHeaderColumn программно используя карту.

Uncaught Error: Ошибка. Никакой ключевой столбец не определен в TableHeaderColumn. Используйте 'isKey={true}', чтобы указать уникальный столбец после версии 0.5.4.

Если я не использую карту и жесткий код одинаковых значений, все работает. Я обычно использую карту для таблиц, и она обычно работает как шарм. Я пытался с и без key свойство для карты, та же ошибка.

/questions/47290697/kak-ya-mogu-sdelat-povtoryayuschiesya-elementyi-react/47290744#47290744

Не работает:

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>