使用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 组件渲染错误空白内容
359浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
436浏览 • 1回复 待解决
组件状态修改与build渲染机制
324浏览 • 1回复 待解决
Web组件是否支持离屏渲染
486浏览 • 0回复 待解决
如何实现一个折叠组件
366浏览 • 1回复 待解决
如何实现一个组件不停地旋转
745浏览 • 1回复 待解决
ForEach循环渲染的过程是什么样的
304浏览 • 1回复 待解决
有没有一个ARK UI组件库的工程模版?
412浏览 • 1回复 待解决
OpenHarmony UI组件库发现了一个好东西!
5403浏览 • 2回复 待解决