收藏
回答

wx:for创建组件列表后,数组中的部分数据被删除时,组件列表如何更新

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug wx:for 微信iOS客户端 6.6.6 2.0.0

更新:


以下是我对下面描述的bug的一个解释。如果我的猜想正确,请告诉我能否强制重新创建组件;如果不正确,请告诉我原因。多谢各位开发者与管理员。


操作:

选择第1、第3本书,删除书目


期望结果:

第1、第3本书被从页面上删除,页面上剩下的图书都是未选择状态


实际结果:

原来的第1、第3本书被从页面上删除,但是页面上剩下的图书里,第1、第3本仍然是被选择状态


原因推测:

当数组的数据变动时,框架并没有把那些被删除的数据对应的组件也删除,而是从前往后保留所需数量的组件,然后把后面多出来的组件删除。这造成的问题是,前面未被删除的组件的内部状态会被保留。



在这个例子里,一开始选择了第1、第3本书,所以第1、第3个booklist-item组件内部的checked属性被设为true。删除了items数组中的第1、第3项后,第1、第3个booklist-item组件并未删除,而仅仅是其中的book属性被替换为新的值。删除的实际是最后两个booklist-item组件,对吗?


临时解决方法:

在删除完书目后,设置isSelecting为false,强制让每个booklist-item组件重置checked属性为false。




原提问:


使用wx:for创建一个列表,列表内每个元素是一个自定义组件。当wx:for使用的数组改变后,并没有重新创建每个组件,而是按照顺序复用了之前创建的组件,且每个组件内部状态保留,只是数据发生变化。


我希望能够重建每个组件,使组件内部数据为初始状态。


如下图,每本书是一个组件:

选中第一本书,组件内部checked == true。然后在数组中删除第一本书后重新setData,可以看到列表直接没有重新创建组件,只是相当于把剩余的数据从第一个组件开始依次传递给每个组件。这造成的问题是,本来第二本书是没有被选中的,现在也被选中了。


只选中第一本,然后点击删除:




删除第一本后,第一个图书组件还是被选择状态:



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

2 个回答

  • 不要偏执。
    不要偏执。
    2018-05-21

    你可以把它隐藏掉呀~display:none,请求什么的不影响把,下次进来不就没有啦

    2018-05-21
    有用 1
    回复 1
    • 2018-05-21
      您是指不要真正删除数据,而是将被删除的数据设为隐藏?这个也是一个好方法。不过我还是想确认一下是否真的是像我想的那样,wx:for会复用列表前面的组件、删除后面多余的组件。 感谢~
      2018-05-21
      回复
  • 2018-05-21

    在请求到的数据列表数组booklist直接移除当前的item就可以了。就像上拉加载一样拿到的数据concat到之前的booklist数组里面得到一个新的数组。然后在进行setData({booklist:  移除后的数组})。

    2018-05-21
    有用
    回复 3
    • 2018-05-21
      我就是这么做的呀,在booklist里删除选中的item后进行setData({booklist: newBooklist})。然后就出现了我上面所说的问题。
      2018-05-21
      回复
    • proto
      proto
      2018-06-21回复

      楼主现在解决了吗?我也遇到了这样的问题,wx:for里的自定义组件不会刷新

      2018-06-21
      回复
    • 对角另一面
      对角另一面
      2018-06-27回复proto

      我也遇到同样的问题,现在的解决方法是,将后面可能会更新的字段都绑定到自定义组件上,字段更新的时候就会触发自定义组件更新了

      2018-06-27
      回复
登录 后发表内容