鸿蒙开发 数组改变,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() 
          )
        }
相关推荐
国医中兴2 小时前
Flutter 三方库 dson 的鸿蒙化适配指南 - 极简的序列化魔法、在鸿蒙端实现反射式 JSON 映射实战
flutter·harmonyos·鸿蒙·openharmony
池央3 小时前
在鸿蒙上跑 AI Agent:JiuwenClaw-on-OpenHarmony 完整实战
人工智能·华为·harmonyos
互联网散修3 小时前
零基础鸿蒙应用开发第五节:基础数据类型与对象类型转换
华为·harmonyos·鸿蒙应用开发入门教程
弓.长.4 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-fast-image — 高性能图片加载组件
react native·react.js·harmonyos
互联网散修4 小时前
零基础鸿蒙应用开发第六节:复杂数据类型入门 —— 数组、元组与枚举
华为·log4j·harmonyos
国医中兴4 小时前
Flutter 三方库 cloudflare_r2_uploader 的鸿蒙化适配指南 - 云端存储的疾速通道、在鸿蒙端实现 R2 分段上传实战
flutter·harmonyos·鸿蒙·openharmony·cloudflare_r2_uploader
盐焗西兰花4 小时前
鸿蒙学习实战之路-Share Kit系列(13/17)-配置目标应用名单(企业应用)
学习·华为·harmonyos
Easonmax5 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-image-picker — 图片选择器
react native·react.js·harmonyos
国医中兴5 小时前
Flutter 三方库 weaver 的鸿蒙化适配指南 - 玩转轻量级服务发现、在鸿蒙端实现模块化治理与解构实战
flutter·harmonyos·鸿蒙·openharmony
国医中兴5 小时前
Flutter 三方库 tapper 的鸿蒙化适配指南 - 单元测试的“闪电侠”、在鸿蒙端实现极简函数式测试实战
flutter·harmonyos·鸿蒙·openharmony