问题复现

线上问题反馈群收到之后，马上本地运行项目访问测试环境数据，结果一通操作之后复现不出来，然后访问生产环境，先随机找一条数据根据手机号搜索，正常返回一条数据，重置之后，再找另外一条数据也是根据手机号搜索，结果不正常了，连带之前的那条数据也出现了，再一看接口确实只返回了一条数据，以此多次重复操作，搜索结果有很多条异常数据。如下图所示：

问题定位

首先接口返回数据是正常的，所以排除接口问题，然后查看前端代码，也没有数据缓存相关的逻辑，所以初步怀疑是框架渲染问题导致，用过Antd的同学都知道，Table 组件有个 rowKey 属性，需要取接口主键作为唯一值，如果这个值不唯一的话，那就会导致数据异常。

<Table rowKey='relationId' />

仔细再检查接口返回第一页所有数据，发现有 2 条相同数据，然后根据关键字查询，找到 rowKey 是 relationId 字段，果不其然一模一样。

最后就把问题抛给后端，让他们排查为什么能新增相同的数据，新增的时候有没有校验，后端把相同的数据删掉一条搜索就正常了。虽然问题这样得到了处理，但作为前端其实我们都知道，很多时候会出现 rowKey 相同的情况，尤其是测试环境，有些后端也不清楚为什么要有唯一值，所以前端是不是有更好的办法去规避这种问题？

解决方案

经过网上查找资料发现，通过模板字符串复合值（接口数据主键 + 下标值）拼接的方式可以很好的避免。

<Table rowKey={(record: any, index: number) => `${record.relationId}${index}`} />