arkts列表渲染只能渲染一条数据

最新推荐文章于 2024-11-04 18:34:35 发布

破碎丨人生

最新推荐文章于 2024-11-04 18:34:35 发布

阅读量339

点赞数 5

分类专栏： HarmonyOS 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zwj970825/article/details/135986525

版权

HarmonyOS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讲述了在Vue或React中，当数组数据变化但列表渲染不更新的问题，解决方法是在`forEach`循环中为每个子项设置唯一的`key`值，这里使用的是索引号作为key。

摘要由CSDN通过智能技术生成

如下图，我的变量是一个数组类型，存在多条值的，但是无论变量里面的值怎么发生变化，渲染出来的数据都还是一条。

此时的代码如下，无论的我的数组发生什么变化，都是只渲染一条数据

//定义的变量
@State data:any = []


//UI代码
List() {
  ListItem() {
    Row() {
      Image('static/icon/rt.png').width(45).margin({ top: 10, bottom: 10, right: 10, left: 0 })
       Text('返回上一层').fontSize(18)
    }.cell()
  }

  ForEach(this.data, (itemValue: any) => {
    ListItem() {
      DeptItem({ item: itemValue }).onClick(() => {
        this.DeptItemChange(itemValue)
      })
    }



   }, (item: any) => item)
}.margin({bottom:70})

解决方法如下，需要在ForEach循环时设置一个每个子项的key值，这样才可以正常渲染

ForEach(this.data, (itemValue: any) => {
       ListItem() {
           DeptItem({ item: itemValue }).onClick(() => {
               this.DeptItemChange(itemValue)
           })
       }

//在这里需要给每个子项设置一个key值,并且保证key值存在,我这个数组比较特殊,只能用index来设置key值
}, (item: any,index:number) => index.toString())

结果如图: