如何在React Bootstrap Table中指定key以解决列表唯一key属性警告

你遇到的这个警告是因为使用map遍历渲染列表元素时，没有为最外层的返回元素指定唯一key属性，针对你给出的代码，只需要给map返回的<tr>标签添加key属性即可。

修改方法 #

优先使用每条数据自带的唯一字段作为key值（比如数据ID、业务唯一编码等），如果没有合适的唯一字段，也可以临时使用遍历索引（不推荐在列表会频繁增删、排序的场景使用，会导致React渲染异常）。

修正后的代码示例 #

<Table size="sm" responsive="sm" bordered hover striped>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
  </thead>
  <tbody>
    { histories.map((h) => (
      {/* 给map直接返回的tr标签添加key属性，这里以数据的id字段为例 */}
      <tr key={h.id}>
        {/* 额外提示：表体数据建议用td而非th，th多用于表头单元格 */}
        <td>{h.col1}</td>
        <td>{h.col2}</td>
        <td>{h.col3}</td>
        <td>{h.col4}</td>
      </tr>
    ))}
  </tbody>
</Table>

注意事项 #

• key必须加在map方法直接返回的最外层DOM节点上，不要加在节点内部的子元素上
• 不要使用随机数作为key值，会导致组件频繁卸载重渲染，影响性能
• 静态写死的表格行不需要加key，只有动态循环生成的元素才需要设置

内容的提问来源于stack exchange，提问作者Peter Kronenberg