小程序 For developer:Do not set same key “[object Object]“ in wx:key.

原创已于 2022-02-25 11:34:01 修改 · 7.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

于 2021-06-11 10:48:03 首次发布

vant 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在小程序中使用wx:key属性的两种方式：使用*this和index。通过具体的代码示例对比了这两种设置方式，并展示了如何针对不同的数据结构进行适配。

将wx:key="*this" 改为 wx:key="index"

1、wx:key="*this"

list: ['GX245T-01', 'GX245T-02', 'GX245T-03'],

<van-checkbox
    wx:for="{{ list }}"
    wx:key="*this"
    name="{{ item }}"
    custom-class="demo-checkbox"
>

2、wx:key="index"

list:[

{goodsName:"aaa", goodsNo:"GX245T-01",goodsCount:"1" },

{goodsName:"bbb", goodsNo:"GX245T-02",goodsCount:"1" },

{goodsName:"ccc", goodsNo:"GX245T-03",goodsCount:"1" },

<van-checkbox
    wx:for="{{ list }}"
    wx:key="index"
    name="{{ item }}"
    custom-class="demo-checkbox"
>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

种麦南山下

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

wx:key 详解及其警告处理

荒的博客

06-22

1213

<block wx:for="{{movies}}" wx:for-item="movie"> 该代码在循环的时候控制台会警告warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略不影响使用可以修改如下 <block wx:for="{{movies}}" wx:key="movies" wx:for-item="movie"> wx:key是用来告诉程序按照某个key去排序这个组件，例如wx:key="Id",此时组件顺序就会按照你arr中Id..

com.netflix.client.ClientException: Load balancer does not have available server for client: 的解决办法

Spring Boot-Common On With You

01-23

6476

问题概述：在基于微服务架构风格的项目开发过程中，使用Spring Cloud Zuul 来实现服务请求的代理、路由以及过滤的操作，在配置使用过程中遇到了一个梗，异常信息“ Caused by: com.netflix.client.ClientException: Load balancer does not have available server for client: new ” ...

参与评论您还未登录，请先登录后发表或查看评论

小程序setdata 改变数据集时提示 For developer:Do not set same key "[object Object]" in wx:key. 跳坑

小白的一次小程序编程的各种记录

04-16

1万+

小程序setdata 改变数据集时提示 For developer:Do not set same key “[object Object]” in wx:key. 刚开始以为数据集错误，查网后又想到数据集是通过for 循环渲染的，在for 时需要设置 wx:key ，原来代码是 <block wx:for="{{list}}" wx:key="*this" wx:for-item="it...

iOS微信支付

sky_2016的专栏

10-02

1万+

最近要用微信支付功能，在此总结一下！需要下面第三方支持 1、首先到微信开放平台上，申请app及与T进行签约、认证 https://open.weixin.qq.com/ 获取到： /** * 微信开放平台申请得到的 appid, 需要同时添加在info.plist文件中URL schema，用于完成时，回调到app */ #define WXA

小程序报错 - setdata改变数据集时提示 For developer:Do not set same key “[object Object]“ in wx:key.

Be myself

08-27

6524

搭建微信静态页面时，自己写的假数据，用wx:for=""循环渲染的，结果。。。嗯。被绊住了。 --- 起初是这样写的： <block wx:for="{{phoneOptions}}" wx:key="*this" wx:for-index='index' > <view class="phoneOpt {{optIndex == index?'acti...

小程序——Do not set same key \"[object Object]\" in wx:key.

Lucifer的博客

05-02

2万+

warning：Do not set same key “[object Object]” in wx:key. 项目中自定义列表组件，在引用该组件渲染时，for 循环中绑定 key 的值由于动态改变了，会报一个warning。一般页面中for循环的key的值是 *this，在组件中不建议这个写，最好绑定为item自带的唯一的标识符，如 id。 ...

使用glm进行ragas评测时出现openai.BadRequestError: Error code: 400的解决方案

weixin_43178406的博客

09-10

1万+

本文主要介绍了使用glm（智谱大模型API）进行ragas评测时出现openai.BadRequestError: Error code: 400的解决方案，希望能对使用glm大模型和ragas测评框架的同学们有所帮助。文章目录 1. 问题描述 2. 解决方案

tidevice.exceptions.MuxServiceError: Could not start service: com.apple.testmanagerd.lockdown.secure

python_AI_fans的博客

07-15

4170

错误是在进行利用pycharm IDE和airtest框架进行苹果手机自动化测试遇到的错误具体如下 [I 210715 10:32:34 _device:572] ProductVersion: 14.6 [I 210715 10:32:34 _device:551] Download https://tool.appetizer.io/iGhibli/iOS-DeviceSupport/raw/master/DeviceSupport/14.6.zip -> C:\Users\Xpeng\.

dlerror: libcuda rt.so.11.0: cannot open shared object file: No such file or directory的问题解决办法

qq_40701060的博客

08-03

4532

全报错：dlerror: libcuda rt.so.11.0: cannot open shared object file: No such file or directory; LD_LIBRAR Y_PATH: /usr/local/cuda/lib64::/usr/local/nccl_2.10.3-1+cuda11.0_x86_64/lib 首先要在cuda安装的路径下面查看以下 cd /usr/local/cuda/lib64 查看是否有libcuda rt.so.11.0文件，以.

编译Android时报错：error while loading shared libraries: libncurses.so.5: cannot open shared object file:

druieam的博客

06-17

4754

make时报错： prebuilts/clang/host/linux-x86/clang-3289846/bin/clang.real: error while loading shared libraries: libncurses.so.5: cannot open shared object file: No such file or directory 解决办法： sudo apt-get install libncurses5 重新make可以正常编译 ...

解决小程序报错：wx：for Do not set same key \“NaN\“ in wx:key.

weixin_46419373的博客

08-10

2688

今天写项目的时候。忽然报了一个错，翻译之后才明白自己的错误原因。在使用wx：for的时候出现了Do not set same key \"NaN\" in wx:key.这样的错误。翻译并去网上查看资料，说是使用wx:key的原因试了一下，没用字面意思是不要设置同一个key，我去js里查看我的item，原来是这样写的，这种写法应该是把所有的user都set成了array[0].name this.setData({ user:array[0].name }) 正确写法 this.set.

uniapp微信小程序报错Do not set same key “1“ in wx:key. (anonymous)

南北极之间

05-12

2905

uniapp微信小程序报错Do not set same key "1" in wx:key. (anonymous)

Do not set same key "NaN" in wx:key.

wuyoulv的博客

04-02

6039

微信小程序开发出现 Do not set same key “NaN” in wx:key. 产生原因出现这个的原因是由于没有将传递回来的json字符串转化成json对象导致的。解决方法使用JSON.parse(str)转换成json对象就可以了。 ...

微信小程序报错总结

夜空下的凝视

06-18

1005

1、警告： Now you can provide attr wx:key for a wx:for to improve performance. 解决办法：在 wx:for 后面添加 wx:key=”***” 即可，如 <block wx:for="{{Industry}}" wx:key="key"> 2、警告：Do not set same key “NaN” in wx:k...

小程序setData中键名key多种设置方法

weixin_42340514的博客

10-15

502

data: { person:{ name:'张三', age:19, work:['学生','学生1','学生2'] }, num:1 }, addNum :function() { let count=2 this.setData({ //正常 num:this.data.num+1, //对象 'person.name':this.data.person.name+...

微信小程序：使用 wx:key 提升 wx:for 的渲染效率

Kilven

12-06

5117

Now you can provide attr "wx:key" for a "wx:for" to improve performance 之所以加上 wx:key 会提升 wx:for 的渲染效率，原因是（我的初步理解）如果不加 wx:key, 在 setData 之后，如果 array 内的数据如果发生改变，会重新创建前端的渲染对象加上 wx:key，重新渲染时，只是将对应的...

微信小程序 wx:key 高级列表循环

最新发布

11-19

<think> 我们正在解决原生小程序中出现的 "Do not set same key '2' in wx:key" 错误。这个错误通常是由于在列表渲染（使用 `wx:for`）时，为多个列表项设置了相同的 `key` 值（在这个错误中，相同的键是'2'）所导致的。 ### 错误原因分析在微信小程序的列表渲染中，`wx:key` 属性用于指定列表中项目的唯一标识符。当两个或多个列表项具有相同的 `key` 值时，就会触发这个错误。因为框架需要每个项有一个唯一的 `key` 来跟踪每个节点的身份，从而在重新渲染时能够高效地更新和重用元素。 ### 解决方法 1. **确保 `wx:key` 的值是唯一的**： - 检查你设置 `wx:key` 的值（例如，数组中的某个字段），确保它在当前列表中是唯一的。例如，如果你的数组是这样的： ```javascript data: { list: [ { id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 2, name: 'C' } // 注意这里有两个id为2的项 ] } ``` 那么当你在 `wx:for` 中使用 `wx:key="id"` 时，就会因为两个相同的 `id=2` 而报错。解决办法是确保每个项的标识字段（如 `id`）唯一。 2. **使用数组索引作为 `wx:key`（不推荐）**： - 如果数据中没有唯一标识符，可以使用数组索引（`index`）作为 `wx:key` 的值。但需要注意，当列表顺序会动态改变时（如排序、添加、删除等），使用索引可能导致渲染问题，因为索引会变化。 ```html <view wx:for="{{list}}" wx:key="index"> {{item.name}} </view> ``` 3. **使用 `*this` 作为 `wx:key`（当数组项是唯一的字符串或数字时）**： - 如果数组的每一项都是一个唯一的字符串或者数字，可以直接使用 `*this` 作为 `wx:key` 的值。这样，数组项本身将被用作键。 ```javascript data: { list: [ 'A', 'B', 'C' ] // 注意：如果数组中有重复的字符串，同样会报错 } ``` ```html <view wx:for="{{list}}" wx:key="*this"> {{item}} </view> ``` 4. **生成唯一标识**： - 如果数据本身没有唯一标识，可以在数据加载时，为每一项生成一个唯一标识（例如，使用时间戳、随机数或者像 `uuid` 这样的库），然后将这个标识作为 `wx:key` 的值。 ### 示例假设我们有一个列表，其中每个项没有唯一的标识，我们可以这样处理： ```javascript // 在加载数据时，为每个项添加一个唯一id const list = [{ name: 'A' }, { name: 'B' }, { name: 'C' }]; // 为每个项生成一个唯一id（这里使用简单的时间戳和随机数组合，实际中可以使用更健壮的方法） list.forEach(item => { item.id = new Date().getTime() + Math.random(); }); this.setData({ list }); ``` 然后在wxml中： ```html <view wx:for="{{list}}" wx:key="id"> {{item.name}} </view> ``` ### 注意事项 - 请避免在 `wx:key` 中使用可能重复的值。 - 如果使用索引（`index`）作为 `key`，要意识到当列表发生变化时，可能会导致不必要的渲染（因为索引会变）或者状态错误（例如，列表项中包含了输入框，输入框的状态可能会错乱）。 - 最佳实践是使用数据中唯一且稳定的标识符。 ### 总结要解决 "Do not set same key '2' in wx:key" 错误，核心是确保每个列表项都有一个唯一的 `key` 值。可以通过检查数据源，确保用于 `wx:key` 的字段在列表中是唯一的，或者生成唯一标识符来解决。 §§相关问题§§ 1. 如何在小程序列表渲染中正确使用 `wx:key`？ 2. 小程序中使用索引作为 `wx:key` 有什么风险？ 3. 如何为小程序列表数据生成唯一标识符？ </think> ### 解决原生小程序中 "Do not set same key '2' in wx:key" 错误的方法这个错误表示在 `wx:for` 循环中出现了重复的 `key` 值（此处为 "2"），违反了微信小程序中 **key 值必须唯一**的要求[^2][^3]。以下是完整解决方案： #### 原因分析 1. 列表数据中存在重复标识字段（如多个元素的 id 都为 2） 2. 使用了非唯一值（如数组索引）作为 key 3. 嵌套循环中 key 值冲突 #### 解决方法 **1. 确保数据源唯一性（推荐）** ```javascript // 修改前（有重复id） data: { list: [ {id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 2, name: 'C'} // 重复key! ] } // 修改后（确保id唯一） data: { list: [ {id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 3, name: 'C'} // 修正重复key ] } ``` **2. 使用复合 key（适用于多字段组合）** ```html <view wx:for="{{list}}" wx:key="id-name"  > {{item.name}} </view> ``` **3. 正确使用索引 key（谨慎使用）** ```html  <view wx:for="{{list}}" wx:key="index"  > {{index}}: {{item.name}} </view> ``` **4. 嵌套循环的特殊处理** ```html <view wx:for="{{outer}}" wx:key="outerId"> <view wx:for="{{inner}}" wx:key="innerId"  wx:for-item="innerItem" > {{outerItem.id}}-{{innerItem.id}} </view> </view> ``` #### 关键原则 1. `wx:key` 值必须在**同级列表**中保持唯一 2. 优先使用数据中的唯一标识字段（如 id） 3. 避免使用可能重复的字段（如 status/category 等） 4. 嵌套循环时每层需独立设置 key > 正确设置 key 能显著提升列表渲染性能，避免节点重用错误[^3]。当列表数据变化时，小程序框架会基于 key 值高效更新 DOM 节点而非重新渲染整个列表。