For developer:Do not set same key "[object Object]" in wx:key 报错解决方法

更新日期: 2021-01-22 阅读次数: 6931 字数: 366 分类: 微信小程序

在解决小程序 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 聊聊, 查看更多联系方式