收藏
回答

按路径更新的方式 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>


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

2 个回答

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2019-06-21

    感谢反馈。


    已经查清楚是个什么 bug 了。大体上是这样:如果在尝试修改 key 对应值,目前基础库会尝试修改列表中 item 的顺序,而不会尝试比对除 key 以外的其他 item 内容,也就导致 item 顺序变了但是 data-x 没有正确调整。


    我们会尝试修复这个 bug ,但是看起来不太好修复,短期内这个问题还会存在。


    在你的场景中,可以尝试这样做:修改 key 对应值的时候,使用 setData 设置整个 item (而不是仅设置 key 对应值),如:


    this.setData({ 'list[0].key': 'xxx' })


    改为:


    this.setData({ 'list[0]': { key: 'xxx', data: this.list[0].data } })

    2019-06-21
    赞同 3
    回复
  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2019-06-19

    改一下key

    2019-06-19
    赞同
    回复 1
    • 健
      2019-06-19
      1. 使用 index 作为 key,是反优化。

      2. 绕过此问题很简单,但这个 bug 没打算修复?

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