收藏
回答

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

回答关注问题邀请回答
收藏

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
    赞同
    回复
登录 后发表内容