React表格行已配置唯一Key仍报错，求排查与解决方法

我一眼就看出问题出在哪了——你把key属性加错位置啦！咱们一步步来拆解：

问题根源 #

你在map里返回的最外层元素是无key的短语法Fragment（<>），而React要求map迭代的每一项的根元素必须携带唯一key。虽然你给<tr>加了key，但它并不是当前循环项的根元素，React根本识别不到这个key，自然会报错。另外，短语法的Fragment（<>）本身不支持添加key属性，这也是个隐形坑。

如果之后出现重复key的报错，那大概率是你的products数组里存在_id重复的项，得先检查数据源的唯一性。

两种修复方案 #

方案1：去掉多余的Fragment（推荐）

你的循环里只返回了一个<tr>，完全没必要用Fragment包裹，直接把key加在<tr>上就行：

<table>
  <tbody>
    {!loading && products && products.map((product) => (
      <tr key={product._id}>
        <td>{product.name}</td>
        <td>
          <span>
            <strong>{product.desc}</strong>
          </span>
        </td>
      </tr>
    ))}
  </tbody>
</table>

方案2：使用带key的完整Fragment

如果之后你的循环里需要返回多个同级元素（比如多个<tr>），就必须用完整的React.Fragment标签并添加key：

import React from 'react';

// ...

<table>
  <tbody>
    {!loading && products && products.map((product) => (
      <React.Fragment key={product._id}>
        <tr>
          <td>{product.name}</td>
          <td>
            <span>
              <strong>{product.desc}</strong>
            </span>
          </td>
        </tr>
        {/* 这里可以加其他同级元素，比如另一个<tr> */}
      </React.Fragment>
    ))}
  </tbody>
</table>

额外检查项 #

如果修复后还是出现重复key报错，赶紧去核对你的products数组：

• 确认每个product._id都是唯一的，没有重复值
• 排查是否在数据获取时出现了重复加载、数据重复的问题

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