收藏
回答

自定义组件动态渲染问题请教!动态渲染自定义组件,发生组件之间数据相窜情况,求解

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小程序 Bug 客户端 7.0.5 2.7.7

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


示意结构:

顶部tabsbar

每个tab对应一个内容容器

内容容器中对内容进行渲染


为了减少页面dom,不进行全量tab对应容器组件的渲染,

每次只渲染当前tab和相邻的2个tab的数据,

[左边tab容器] [当前tab容器] [下一个tab容器]


举个例子:

当前tab为3,那需要渲染的tab就是2、3、4,这3个tab,

当点击到tab4时,需要渲染的tab就是3、4、5,这3个tab


每次切换tab后,会对当前tab的容器进行渲染,

加载对应容器的内容展示。


tab容器为同一个组件,通过组件设置id进行区分,


每次点击tab,会更新需要渲染的tabs,

通过组件id进行组件的选择

然后对tab对应的容器渲染

为了测试方便展示数据动态增量(只在对应id组件内),

数据测试时进行了concat增量,



现在发现容器组件会发生数据相窜,


提供了代码片段,

在容器内进行了测试数据输出


- 预期表现

点击tab,只渲染对应容器的内容


- 复现路径

点击tab->

容器测试数据输出->

切换tab->

数据相窜结果出现



- 提供一个最简复现 Demo

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



- 补充

如果不进行tab的动态更新,直接渲染全量tab,却不会发生数据相窜的情况



最后一次编辑于  07-25  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

7 个回答

  • \
    \
    07-25

    兄dei,你每次点同一个tab试试(一直点第三个),会重复加很多数据(这是容器三,然后下面还有一大堆3),问题就出在这,看起来好鬼畜。


    07-25
    赞同
    回复 6
    • David
      David
      07-25
      所以写的demo有问题?
      07-25
      赞同
      回复
    • David
      David
      07-25
      我在每个组件里都进行了测试数据的concat,用来表示数据在动态变化,所有容器里的数据是增量的
      07-25
      赞同
      回复
    • \
      \
      07-25
      你的组件里面的list是存3个tab的信息吧,如果是那你显示内容这里应该是出了问题,点击同一个tab应该不触发渲染才对(自己单独写刷新除外);如果你的list不是3个tab的数据,那最好区分每个list。
      07-25
      赞同
      回复
    • David
      David
      07-25回复\
      在进行组件调用的时候已经通过id选择了对应的组件,按道理说组件内的list就是当前id对应组件的数据才对吧。难道即使通过id选择,n个组件内数据也是共享的?
      07-25
      赞同
      回复
    • David
      David
      07-25回复\
      是测试过不动态渲染容器,直接循环全部tan对应的容器,数据是隔离的,也就是说当组件动态渲染时,才会出现这个恐怖的情况
      07-25
      赞同
      回复
    查看更多(1)