同事一行代码,差点给我整破防了!

大家好,我是多喝热水。

最近开发公司项目的时候遇到一个哭笑不得的问题,知道真相的我差点破防!

还原现场

周一开周会的时候正常评审需求,在演示的过程中发生了一点小插曲,我们的聚合搜索功能它不能正常使用了,搜到的内容还是首次加载的数据,如下:

看到这种情况,我下意识的以为是后端返回的数据的问题,所以结束会议后我就着手排查了,如下:

结果发现后端的数据是没问题的,这我就很奇怪了,其他的 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!

养成好习惯,特别是这种数据会动态变化的场景!!!

相关推荐
雯0609~2 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ5 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z10 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁34 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜34 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40435 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish36 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple36 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five37 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序37 分钟前
vue3 封装request请求
java·前端·typescript·vue