wx:for创建组件列表后,数组中的部分数据被删除时,组件列表如何更新
发布于 5 年前 作者 wsong 15667 次浏览 来自 问答

更新:


以下是我对下面描述的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 回复

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

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

回到顶部