按路径更新的方式 setData,导致带 key 的列表渲染出错
- 当前 Bug 的表现(可附上截图) 第一次点击按钮,list 渲染正常。dom 结构为: [图片] 第二次点击按钮,list 渲染错误。dom 结构为: [图片] - 预期表现 第二次点击按钮后,data-x 的值应该从上往下分别为 0~6,但此时却仍然是第一次渲染 list 时的 data-x。 证明这种情况下,按路径的方式 setData 时,列表属性值没有更新。 - 复现路径 1. 点击一次按钮,观察列表的 dom。 2. 第二次点击按钮,再观察列表 dom 的 data-x。 - 提供一个最简复现 Demo index.js [代码]Component({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]list: [],[代码][代码] [代码][代码]i: 0[代码][代码] [代码][代码]},[代码][代码] [代码][代码]methods: {[代码][代码] [代码][代码]onButtonClick() {[代码][代码] [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].data.i === 0) {[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]'list[0]'[代码][代码]: { idx: [代码][代码]"0"[代码][代码], str: [代码][代码]"back off"[代码] [代码]},[代码][代码] [代码][代码]'list[1]'[代码][代码]: { idx: [代码][代码]"1"[代码][代码], str: [代码][代码]"now"[代码] [代码]},[代码][代码] [代码][代码]'list[2]'[代码][代码]: { idx: [代码][代码]"2"[代码][代码], str: [代码][代码]"point"[代码] [代码]},[代码][代码] [代码][代码]'list[3]'[代码][代码]: { idx: [代码][代码]"3"[代码][代码], str: [代码][代码]"simple"[代码] [代码]},[代码][代码] [代码][代码]'list[4]'[代码][代码]: { idx: [代码][代码]"4"[代码][代码], str: [代码][代码]"total"[代码] [代码]},[代码][代码] [代码][代码]'list[5]'[代码][代码]: { idx: [代码][代码]"5"[代码][代码], str: [代码][代码]"pity"[代码] [代码]},[代码][代码] [代码][代码]'list[6]'[代码][代码]: { idx: [代码][代码]"6"[代码][代码], str: [代码][代码]"name"[代码] [代码]},[代码][代码] [代码][代码]i: 1[代码][代码] [代码][代码]})[代码][代码] [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码]([代码][代码]this[代码][代码].data.i === 1) {[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]'list[0].str'[代码][代码]: [代码][代码]"point"[代码][代码],[代码][代码] [代码][代码]'list[1].str'[代码][代码]: [代码][代码]"back off"[代码][代码],[代码][代码] [代码][代码]'list[2].str'[代码][代码]: [代码][代码]"simple"[代码][代码],[代码][代码] [代码][代码]'list[3].str'[代码][代码]: [代码][代码]"pity"[代码][代码],[代码][代码] [代码][代码]'list[4].str'[代码][代码]: [代码][代码]"name"[代码][代码],[代码][代码] [代码][代码]'list[5].str'[代码][代码]: [代码][代码]"total"[代码][代码],[代码][代码] [代码][代码]'list[6].str'[代码][代码]: [代码][代码]"now"[代码][代码],[代码][代码] [代码][代码]i: 2[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码] [代码][代码]},[代码][代码] [代码][代码]anonymousFunc0(e) {[代码][代码] [代码][代码]console.log([代码][代码]'e: '[代码][代码], e.target.dataset.x)[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码]})[代码] index.wxml [代码]<[代码][代码]block[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]button[代码] [代码]bindtap[代码][代码]=[代码][代码]"onButtonClick"[代码][代码]>Generate random items</[代码][代码]button[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]wx:key[代码][代码]=[代码][代码]"str"[代码] [代码]bindtap[代码][代码]=[代码][代码]"anonymousFunc0"[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{list}}"[代码] [代码]data-x[代码][代码]=[代码][代码]"{{item.idx}}"[代码][代码]>{{item.str}}</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]block[代码][代码]>[代码]