首次使用React-Table遇行key警告，求添加行唯一key的方法

咱们先拆解下你代码里的核心问题，这也是警告出现的根源：

1. 错误的表格渲染逻辑 #

你现在用_.map(itemData, () => <ReactTable ... />)来渲染表格，但你的itemData是单个对象（从你给出的数据结构来看），并非数组。_.map遍历对象时会逐个处理每个属性，导致你意外渲染了多个ReactTable组件，而且每个组件的key都用了itemData.ID——这必然会触发重复key的警告，因为所有表格的key都是同一个值。

正确的做法是：ReactTable本身就支持直接接收数组数据，完全不需要手动遍历数据渲染多个表格。如果接口返回的是单个对象，就把它包装成数组；如果返回的是数组，直接传入即可。

2. 给ReactTable的行设置唯一Key #

ReactTable提供了getRowKey属性，专门用来指定每行的唯一标识，用它就能解决行的key警告。你只需要把这个属性指向数据里的唯一字段（也就是你的ID字段）：

<ReactTable
  data={Array.isArray(itemData) ? itemData : [itemData]}
  columns={columns}
  getRowKey={(row) => row.ID} // 指定用每行的ID作为唯一key
/>

3. 修正后的完整render方法 #

把之前错误的map渲染逻辑去掉，改成直接渲染单个ReactTable组件，同时加上getRowKey配置：

render() {
  const { itemData } = this.state;
  const columns = [
    {
      Header: 'ID',
      Cell: props => <span key={props.value}>{props.value}</span>,
      accessor: 'ID',
    },
    { Header: 'Name', accessor: 'name' },
    { Header: 'Description', accessor: 'description' },
    {
      id: 'price',
      Header: 'Price',
      accessor: d => d.price
    }
  ];

  return (
    <div>
      <CreateItemModal getItems={this.getItems}/>
      {/* 直接渲染单个表格，处理数据为数组并指定行key */}
      <ReactTable
        data={Array.isArray(itemData) ? itemData : [itemData]}
        columns={columns}
        getRowKey={(row) => row.ID}
      />
    </div>
  );
}

额外优化：初始化状态修正 #

你现在把itemData初始化为{}（对象），但接口返回的大概率是数组，建议把初始化改成空数组，这样后续数据处理会更统一：

constructor(props){
  super(props)
  this.state = {
    itemData: [], // 改为空数组
    item: {},
    modalOpen: false
  }
  this.getItems = this.getItems.bind(this);
}

修改后，render里的data就可以直接写data={itemData}，不用再判断是否为数组了。

内容的提问来源于stack exchange，提问作者Simon Taylor