使用ForEach/LazyForEach渲染语法渲染组件,组件仅显示一个或者丢失部分子组件。

使用ForEach/LazyForEach渲染语法渲染组件,组件仅显示一个或者丢失部分子组件。

ForEach( 
 arr: any[], 
 itemGenerator: (item: any, index?: number) => void, 
 keyGenerator?: (item: any, index?: number) => string 
) 
  
LazyForEach( 
 dataSource: IDataSource, 
 itemGenerator: (item: any) => void, 
 keyGenerator?: (item: any) => string 
)

检查ForEach/LazyForEach渲染语法的第三个参数键值生成函数中,针对数组数据的每一个数据项生成的键值是否唯一,当数据项的键值重复时,仅渲染键值第一次出现时的子组件,其余重复键值的子组件不会再添加到父容器中进行渲染。

HarmonyOS
2024-06-11 20:56:27
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
wjmfzsz

确保ForEach/LazyForEach渲染语法的第三个参数针对数组数据中的每一个数据项都生成了唯一的字符串。

异常代码示例

@Entry 
@Component 
struct IndexOne { 
 @State arr: Array<Item> = [new Item(1, '1'), new Item(2, '2'), new Item(3, '3')]; 
  
 build() { 
   Column() { 
     List() { 
       ForEach(this.arr, (item: Item) => { 
         ListItem() { 
           Text(item.id + item.val) 
         } 
         // 针对自定义类型对象,toString()方法在没有重写时默认返回"[object Object]",导致三个元素键值相同 
         // 该场景下可以修改为:item => JSON.stringify(item)解决 
       }, (item: Item) => item.toString() ) 
     } 
   }
分享
微博
QQ
微信
回复
2024-06-12 22:50:14
相关问题
ListItem 组件渲染错误空白内容
738浏览 • 1回复 待解决
组件状态修改与build渲染机制
751浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
819浏览 • 1回复 待解决
如何知道一个组件显示和隐藏
417浏览 • 1回复 待解决
Web组件是否支持离屏渲染
1740浏览 • 0回复 待解决
提供一个关于地图组件使用的小demo
343浏览 • 1回复 待解决
如何实现一个折叠组件
844浏览 • 1回复 待解决