鸿蒙开发 数组改变,ui渲染没有刷新

问题描述:
数组push, 数组长度改变,ui也没有刷新

打印出了数组 console.log(this.toDoData.map(item => `${item.name}`).join(', '), this.toDoData.length)

原代码:

ts 复制代码
        Text('+')
          .fontSize(36)
          .margin({ right: 40 })
          .onClick(() => {
            TextPickerDialog.show({ // 文字选择弹窗
              range: this.availableThings,
              onAccept: (item:TextPickerResult) => {
                // 这里有点问题,数组新增 ui没有刷新
                let obj:ToDo = new ToDo(`${item.value}`)
                this.toDoData.push(obj)
                console.log(this.toDoData.map(item => `${item.name}`).join(', '), this.toDoData.length)
              }
            })
          })
        List({ space: 10 }){
          ForEach(this.toDoData, (toDoItem:ToDo) => {
            ListItem(){
              ToDoListItem({
                toDoItem: toDoItem,
              })
            }
          },(toDoItem: ToDo) => toDoItem.key.toString())
        }

这个问题和列表渲染的key有关系 ,也就是(toDoItem: ToDo) => toDoItem.key.toString()这段代码除了问题,这个key有可能重复,于是做了以下修改:

ts 复制代码
        List({ space: 10 }){
          ForEach(this.toDoData, (toDoItem:ToDo, i:number) => {
            ListItem(){
              ToDoListItem({
                toDoItem: toDoItem
              })
            }
          },
          	// 这里删除或者重新渲染key,使其不重复即可刷新列表
            // (toDoItem: ToDo) => toDoItem.key.toString()
            (i: number) => i.toString() 
          )
        }
相关推荐
Random_index4 分钟前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室3 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu76 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr05758 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟46415 小时前
初识ArkUI
harmonyos
SameX15 小时前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠16 小时前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤1 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*1 天前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统
howard20051 天前
鸿蒙实战:页面跳转传参
harmonyos·跳转·router·传参