问题描述:
数组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()
)
}