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

大家好,我是多喝热水。

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

还原现场

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

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

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

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

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
小牛itbull3 小时前
ReactPress:构建高效、灵活、可扩展的开源发布平台
react.js·开源·reactpress
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js