公告列表
公告列表
收藏
回答

setData单独设置数组的某个索引值，导致wxml 的index 被改变

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 客户端 不限 不限

- 当前 Bug 的表现（可附上截图）

做的一个列表抽屉，标题0和标题1被点击时，对应的下面列表，做展开和收起。如果在setData时只对当前的一项变更数据时，而且如果wxml使用的wx:for循环的data-自定义数据，使用的是index对应的值，此时，data-id=0被变为了1，这种不合理。当再点击标题0时，由于index（data-id）被变为1，此时操作的就是标题1, 不再是标题0


- 预期表现

点击时，互不干涉（ok的demo）https://developers.weixin.qq.com/s/l6ddEJm47Z80

- 复现路径

ng的demo https://developers.weixin.qq.com/s/4vdQVJmv7V8o

- 提供一个最简复现 Demo

https://developers.weixin.qq.com/s/4vdQVJmv7V8o
回答关注问题邀请回答
收藏

2 个回答

  • Maverick
    Maverick
    2019-05-30

    因为你设置的key不是唯一的，而且会变动。

    wx:key='*this' 改为 wx:key="{{index}}"可以解决，但你根据记录展开状态的数组来渲染列表，本身就不合理了

    wx:key

    如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

    wx:key 的值以两种形式提供

    1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

    2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

    当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

    2019-05-30
    有用
    回复 6
    • Xs
      Xs
      2019-05-30

      1. *this 代表在 for 循环中的 item 本身（展开状态的数组来渲染列表，本身就不合理了），这个在理

      2. 不过，初次渲染依据[true,true]状态列表渲染，wxml的data-id，标题0值为0，标题1值为1，说明页面的结构渲染是正确的。但是，通过这个setData对数组的单个属性做变动，会存在这种异常，现象是存在的；ok的demo, wxml依然是这个结构，我换用整体设置arrList的值，效果ok的；我认为这两种方法，底层还是有一定的差异。

      3. 可以试着先点击第二项，按照*this 这个指标， 但是他又是ok的

      4. 所以，个人观点，异常是存在的，是可以通过一些书写方式避开这种问题

      2019-05-30
      赞
      回复
    • Maverick
      Maverick
      2019-05-30回复Xs

      你提供异常的值必然出现异常的结果，wx:key是用于优化渲染性能的，表示的是渲染层节点与逻辑层数据之间的对应关系，避免重复渲染，你提供错误的key，就打乱了这种关系，渲染结果自然就与数据不一致

      2019-05-30
      赞
      回复
    • Xs
      Xs
      2019-05-30回复Maverick

      1. 嗯，异常的值，可以接受

      2. 能帮我解释下这种异常的值，怎么在wxml结构上，由0演变为1

      3. 能帮我解释下这种异常的值，在单设和整设的情况下，存在的差异




      2019-05-30
      赞
      回复
    • Maverick
      Maverick
      2019-05-30回复Xs

      arrList[0]由true改为false，由于arrList[0]对应的的节点key为true，会找到key为true的节点，通过新数据false重新渲染这个节点，此时列表中只有第二项的key为true，根据arrList排序，这个节点会被移动的arrList[0]的位置，并且用新数据false重新渲染。

      总之key是用来绑定数据和节点的，实现具体细节只是推测，你要真对这种异常结果出现的原理感兴趣你可以自己研究 WAWebview.js

      2019-05-30
      赞
      回复
    • Xs
      Xs
      2019-05-30回复Maverick

      嗯，这波分析得在理，wxml视图大致可以看到节点的变动，给你个赞

      2019-05-30
      赞
      回复
    查看更多(1)
  • Xs
    Xs
    2019-05-30

    哈哈，虽然有备案，不过还是希望官方可以看下~

    2019-05-30
    有用
    回复
请 登录 后发表内容
相关问题
相关文档