HarmonyOS 列表刷新问题

目前页面为三层结构 Swiper中按页加载了TestComponent, TestComponent中ForEach添加TestTextComponent,

ForEach依赖的数据类型为class TestVideoModelArray extends Array<TestVideoModel>

现象

1、TestVideoModelArray添加元素, 触发TestTextComponent的onAppear显示, 无疑问

2、修改TestVideoModelArray中元素的属性, 不触发TestTextComponent的onAppear. 直接刷新TestTextComponent的内容, 无疑问

3、同时TestVideoModelArray添加和修改TestVideoModelArray中元素的属性, 同时触发修改和添加位置TestTextComponent的onAppear? 为什么单独修改属性不会触发所属位置的onAppear, 同时添加修改就会触发修改位置的onAppear?

问题

同时修改添加不应该场景一个新组件, 然后只刷新老组件. 为什么同时创建两个新组件(触发onAppear)?

单独添加、单独修改和同时添加修改本质上有什么区别, 为什么有不同的现象?

同时添加和修改的场景如何只触发新添加的元素的onAppear, 而老元素内容刷新?

HarmonyOS

2024-08-08 16:03:34

浏览

回答 1

待解决

回答 1

按赞同

按时间

问题原因是这样的：

程序启动时，是调用struct TestComponent的ForEach方法循环遍历数组videoModels生成列表

因为ForEach方法中没有键值生成函数，所以框架默认的键值生成函数为(item: T, index: number) => { return index + '

’ + JSON.stringify(item); }

我们可以输出这个值，得到第一项的key为：

0{“borderWidth”:2,“pos”:{“y”:{“y”:0}},“streamInfo”:{“name”:“111”,“pos”:{“y”:{“y”:0}}}}

可以发现其中包含了要修改的值name;然后改变了第一项的值，新增一项是，依然是调用这个ForEach方法，此时第一项的key为：

0__{“borderWidth”:2,“pos”:{“y”:{“y”:0}},“streamInfo”:{“name”:“改变元素 streamInfo”,“pos”:{“y”:{“y”:0}}}}

与之前的key不一样了，所以会新创建一个组件，由于位置不变，就把老组件覆盖掉了；

第二项和第三项没有任何修改，所以key值不变，不会新建；最后创建一个新添加的新组件；所以整个过程触发了两次onAppear；

解决方案：在ForEach方法末尾加入键值生成函数，比如"(item:string) => item"，让键值不会因变量的改变而变化，就不会出现该问题现象了

参考文档：

2024-08-08 20:24:37

发布