收藏
回答

自定义组件data卸载页面无法重置

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug 自定义组件 客户端 6.5.3 2.7.4

- 当前 Bug 的表现(可附上截图)

第一步:选择选项,更改data;



第二步返回上一页(关闭了打开组件的页面,组件和页面销毁);

第三步重新进来:页面data是重置的;


第四步重新点击组件内的方法:如图1所示,点击的选项分别是三个,我再点击其他选项时,会显示之前点击过的选项。



组件创建后的打印的data也是没有重置的。



手动清除也是没有效果


- 预期表现


    销毁组件要清除data


- 复现路径

代码片段:

https://developers.weixin.qq.com/s/oYy1pMmJ789B

- 提供一个最简复现 Demo



顺便一问,为什么我的重置操作也有BUG,在点击选项时,更新allFilterData的同时,为什么allFilterDataReset也被赋值了。。

最后一次编辑于  2019-07-11
回答关注问题邀请回答
收藏

2 个回答

  • Maverick
    Maverick
    2019-07-11

    你这逻辑有问题,组件中allFilterData是properties,你却在组件中setData修改allFilterData,导致父页面和组件的allFilterData脱钩(至少视图层不一致)。

    正确逻辑:

    1.页面只传入初始数据,组件中拷贝初始数据作为data,而不是直接setData修改properties

    或者2.逻辑移动到页面,组件中通过触发事件通知页面修改allFilterData的数据


    ——————————————————————————————

    我在组件attached时储存了this.data.allFilterData,比较上一次attached(也就是上一次创建的实例)的allFilterData,发现是同一个对象。(不正常)

    页面onLoad时也对this.data.allFilterData做了比较,每次onLoad,allFilterData都是新的对象。(正常)

    所以应该是你在组件中通过setData修改properties导致的。

    2019-07-11
    赞同 1
    回复 9
    • iiiidong
      iiiidong
      2019-07-11
      非常感谢,我试试
      2019-07-11
      回复
    • iiiidong
      iiiidong
      2019-07-11
      你好,我按照你的方法,把setData放在页面中了,但是组件每次attached的时候allFilterData还是旧的对象怎么破。。
      2019-07-11
      回复
    • Maverick
      Maverick
      2019-07-11回复iiiidong

      上代码片段吧。最好用第一种方案,页面只传入初始数据,组件内拷贝这份初始数据作为自己的data(不要和properties重名),毕竟这种组件显然是要重用的,不可能在每个页面都写筛选的逻辑。

      2019-07-11
      回复
    • iiiidong
      iiiidong
      2019-07-11回复Maverick
      我用了一楼的方法,在页面的onShow重置了数据,就好了。。
      2019-07-11
      回复
    • Maverick
      Maverick
      2019-07-12回复iiiidong
      那样的话你把微信切至后台再切回前台也会重置。
      2019-07-12
      回复
    查看更多(4)
  • 今天天气很好
    今天天气很好
    2019-07-11

    你应该在你用这个组件的那个页面去操作吧

    2019-07-11
    赞同
    回复 5
    • iiiidong
      iiiidong
      2019-07-11
      我的做法是交互逻辑都在组件内完成,点击确定后抛出数据到页面。你指的是哪个操作?
      2019-07-11
      回复
    • 今天天气很好
      今天天气很好
      2019-07-11
      看了你的代码,你应该在filter页面重置的是那个数组
      2019-07-11
      回复
    • 今天天气很好
      今天天气很好
      2019-07-11回复今天天气很好
      onShow(){ this.setData({ allFilterData: [{ filter: 'Brand', filtername: '品牌', select: false, titleSelect: 0, iconclass: 'icon-arrow-bottom', btns: [{ data: 'MINI布岛', select: false }, { data: '布岛小伊', select: false }] }, { filter: 'Category', filtername: '大类', select: false, titleSelect: 0, iconclass: 'icon-arrow-bottom', btns: [{ data: '裤子', select: false }, { data: '裙子', select: false }, { data: '套装', select: false }, { data: '衣服', select: false }] }] }) },
      2019-07-11
      1
      回复
    • iiiidong
      iiiidong
      2019-07-11回复今天天气很好
      好的,我试下
      2019-07-11
      回复
    • iiiidong
      iiiidong
      2019-07-11回复今天天气很好
      解决了,谢谢~~~
      2019-07-11
      回复
登录 后发表内容