ID重复空白代码注意事项?关键点不能忽视!

那天调试新页面,用户反馈点开全是空白,我后脖颈子唰地就凉了。这破问题折腾我一整宿,现在盘盘这事儿让你们少踩坑。

发现坑爹现场

后台数据明明塞得满满当当,前端死活不渲染。抄起浏览器按F12,控制台红彤彤一片报错:"Duplicate keys detected"。好家伙!原来返回的二十条用户数据里,两条记录的ID字段都是空字符串""!后端老哥肯定没想到有人不填ID还能提交成功。

现场抢救实录

我抄起电话就吼后端:"你们校验吃干饭的?" 结果人家振振有词:"前端没做非空校验怪谁?" 得,两边开始踢皮球。干脆自己动手,在前端渲染前加了个过滤器:

  • 先检查ID是不是空的
  • 再拿数组下标当临时ID应急
  • 顺手给每个ID补时间戳后缀防撞车

但这么搞页面是能看了,删除功能又抽风——点删除按钮总删错人。深更半夜蹲在电脑前查代码,原来那两个空白ID的记录删谁都会触发相同key,Vue直接原地懵逼

血泪经验包

现在这坑填平了,总结几条保命指南:

  • 别信后端!渲染前先循环过滤ID空值
  • 数组遍历永远手动写:key="* index"
  • 实在没ID就用时间戳+随机数造个临时身份证
  • 提交数据时在前端先把空ID的拦截了,省得污染数据库

最逗的是后来查数据库,发现那两条空白ID是测试账号。负责人拍着大腿乐:"我随手敲的空格键,谁知道这也能提交!" 气得我当天午饭多吃了两碗米饭压惊。

搞这行的谁没被空白ID坑过?重点就仨字:不!信!任! 管他前后端,自己的地盘自己扫雷。现在我的代码里全是校验空值的if else,宁可页面丑成二维码,也绝不当场表演空白消失术!