在解决小程序 console 报错信息 Now you can provide attr "wx:key" for a "wx:for" to improve performance 之后,出现了新的错误:
For developer:Do not set same key "[object Object]" in wx:key.
而且连续报了 N 行同样的错误,但是报错定位看,各不相同。
错误定位
a.doUpdates @ VM884 WAService.js:2
M.setData @ VM884 WAService.js:2
(anonymous) @ VM884 WAService.js:2
getHomeInfo @ index.js? [sm]:159
onLoad @ index.js? [sm]:137
这个报错定位并不准确,似乎只要是 setData 就会触发这个报错信息。但真正的错误原因并不是这里。
报错原因
循环展示分类名称:
categories: [
{
name: "全职",
value: "非临时工",
},
{
name: "兼职",
value: "临时工",
},
],
wx:for="{{categories}}" wx:for-item="category" wx:key="*this"
只有当 list 中的子项是纯字符串,或者数字时,才可以使用 *this. 所以,就是这里导致了问题。而 *this 正好是 "object Object"。换成 name 字段即可解决。
还是对微信小程序文档阅读得不够仔细:
保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
修复方法
wx:for="{{categories}}" wx:for-item="category" wx:key="name"
网上的解决方案都不可取
在搜索的过程中,看到几种解决方案,感觉都是在胡扯,例如:
- 改成 wx:key="index"
- 改成 wx:key="{{*this}}"
稍微分析一下,就知道完全是靠蒙在解决。
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式