那天调试新页面,用户反馈点开全是空白,我后脖颈子唰地就凉了。这破问题折腾我一整宿,现在盘盘这事儿让你们少踩坑。
发现坑爹现场
后台数据明明塞得满满当当,前端死活不渲染。抄起浏览器按F12,控制台红彤彤一片报错:"Duplicate keys detected"。好家伙!原来返回的二十条用户数据里,两条记录的ID字段都是空字符串""!后端老哥肯定没想到有人不填ID还能提交成功。
现场抢救实录
我抄起电话就吼后端:"你们校验吃干饭的?" 结果人家振振有词:"前端没做非空校验怪谁?" 得,两边开始踢皮球。干脆自己动手,在前端渲染前加了个过滤器:
- 先检查ID是不是空的
- 再拿数组下标当临时ID应急
- 顺手给每个ID补时间戳后缀防撞车
但这么搞页面是能看了,删除功能又抽风——点删除按钮总删错人。深更半夜蹲在电脑前查代码,原来那两个空白ID的记录删谁都会触发相同key,Vue直接原地懵逼。
血泪经验包
现在这坑填平了,总结几条保命指南:
- 别信后端!渲染前先循环过滤ID空值
- 数组遍历永远手动写:key="* index"
- 实在没ID就用时间戳+随机数造个临时身份证
- 提交数据时在前端先把空ID的拦截了,省得污染数据库
最逗的是后来查数据库,发现那两条空白ID是测试账号。负责人拍着大腿乐:"我随手敲的空格键,谁知道这也能提交!" 气得我当天午饭多吃了两碗米饭压惊。
搞这行的谁没被空白ID坑过?重点就仨字:不!信!任! 管他前后端,自己的地盘自己扫雷。现在我的代码里全是校验空值的if else,宁可页面丑成二维码,也绝不当场表演空白消失术!