reactjs - 在循环中创建元素时如何正确设置密钥

Question

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

“警告：数组或迭代器中的每个子项都应具有唯一的“键”道具。使用 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 不能识别你的组件。所以你必须给它们一些标识。最简单的方法是传递一个索引。

当您执行 map() 时，您可以从数组中获取项目和他的位置。然后将该位置传递给循环内的顶级组件

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>
  );
};`