大家好，我是多喝热水。
最近开发公司项目的时候遇到一个哭笑不得的问题，知道真相的我差点破防！
还原现场
周一开周会的时候正常评审需求，在演示的过程中发生了一点小插曲，我们的聚合搜索功能它不能正常使用了，搜到的内容还是首次加载的数据，如下：
看到这种情况，我下意识的以为是后端返回的数据的问题，所以结束会议后我就着手排查了，如下：
结果发现后端的数据是没问题的，这我就很奇怪了，其他的 tab 都能正常展示数据，为什么就只有综合出现了问题？
开始排查
因为这个无限滚动组件是我封装的，所以我猜测会不会是这个组件出了什么问题？
但经过排查我发现，这个组件接收到的数据是没问题的。
那就很奇怪了，我传递的参数是正确的，后端返回的数据也是没问题的，凭什么你不能正常渲染？
直到我看到了这一行代码，我沉默了：
woc，你小子在代码里下毒！
看到这里我基本上可以确定就是这个 index 搞的鬼，在我尝试把它修改成 item.id 后，搜索功能就能正常使用了，如下：
问题复盘
为什么用 id 就正常了？
这里涉及到 React 底层 diff 算法的优化，有经验的小伙伴应该知道，React 源码中判断两个节点是否是同一个节点就是通过这个 key 属性来判断的，key 相同的话会直接复用旧的节点，如下：
这也就解释了为什么切换 tab 后列表中始终都是旧数据，因为我们使用了 index 作为 key，而 index 它是会重复的，新 index 和旧 index 对比，两者相等，React 就直接复用了旧的节点！
但 id 就不一样了，id 我们可以确保它就是唯一的，不会发生重复！
哎，排查问题半小时，解决问题只花 3 秒钟，我 tm.....
这个故事告诉我们：
一定不要在循环节点的时候使用 index 作为 key！
一定不要在循环节点的时候使用 index 作为 key！
一定不要在循环节点的时候使用 index 作为 key！
养成好习惯，特别是这种数据会动态变化的场景！！！