收藏
回答

按路径更新的方式 setData,导致带 key 的列表渲染出错

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

- 当前 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>


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

3 个回答

  • 健
    2019-06-14

    官方有关注这个问题吗?

    2019-06-14
    赞同 1
    回复
  • 曾子洋
    曾子洋
    2019-06-24

    等待官方回复~~~~

    2019-06-24
    赞同
    回复 2
  • 郭辉
    郭辉
    2019-06-11

    wx:key="str"  改为 wx:key="{{index}}" 就好 

    2019-06-11
    赞同
    回复 4
    • 健
      2019-06-11

      以 index 为 key,是一种反优化。


      而且问题不在于如何绕开 bug,而是解决 bug。

      2019-06-11
      回复
    • 郭辉
      郭辉
      2019-06-11回复

      难道不是先保证项目上线吗?如果是随便写写的当我没说

      2019-06-11
      回复
    • 健
      2019-06-11回复郭辉

      并不是项目。。有同学报 issue 给我们框架,我主要为了跟进这个问题何时解决而已。

      2019-06-11
      回复
    • 郭辉
      郭辉
      2019-06-11回复

      我在做列表数据diff的时候也遇到过这个问题,当时为了保证上线就改成了index,后来就没管了。。先关注了,看官方咋解决

      2019-06-11
      回复
登录 后发表内容