在循环中创建元素时如何正确设置键

Question

无法弄清楚为什么我会收到此警告：

"Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using BootstrapTable."

我的代码：

import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

const data = [
  {id: 1, name: 'Item name 1', price: 100},
  {id: 3, name: 'Item name 3', price: 55},
  {id: 2, name: 'Item name 2', price: 100}
];

const cols = Object.keys(data[0]);

export default () => {
  return (
    <BootstrapTable data={data}>          
      {cols.map(name => {
        let key = name === 'id' ? true : false;
        return (
          <TableHeaderColumn dataField={name} isKey={key}>
            {name}
          </TableHeaderColumn>
        );
      })}
    </BootstrapTable>
  );
};`

Answer 1

问题是 React 无法识别您的 components.So 您必须给他们一些 identification.The 最简单的方法是传递索引。

当您执行 map() 时，您可以从 array.And 中获取项目及其位置，该位置传递给循环内的顶级组件

export default () => {


return (
    <BootstrapTable data={data}>          
      {cols.map((name,i) => {
        let key = name === 'id' ? true : false;
        return (
          <TableHeaderColumn key={i} dataField={name} isKey={key}>
            {name}
          </TableHeaderColumn>
        );
      })}
    </BootstrapTable>
  );
};`

在循环中创建元素时如何正确设置键

How to set the key properly when creating the elements in loop

reactjs

react-bootstrap-table