异步回调更新数据源,无法触发列表渲染
问题代码
// xxx.ets
@Observed
export class ObservedArray<T> extends Array<T> {
constructor(args?: T[]) {
if (args instanceof Array) {
super(...args);
} else {
super();
}
}
}
@Observed
export class ChatItemModel {
id_: string;
content: string;
constructor(msgId: string, content: string) {
this.id_ = msgId;
this.content = content;
}
}
@Observed
export class ChatListModel {
public chatItems: ObservedArray<ChatItemModel> = new ObservedArray<ChatItemModel>();
fetChatList() {
setTimeout(() => {
for (let i = 0; i < 30; i++) {
this.chatItems.push(new ChatItemModel(i.toString(), `小李${i}今天晚上放学不要走`));
}
}, 2000);
}
}
@Entry
@Component
export struct ChatList {
@State chatListModel: ChatListModel = new ChatListModel();
aboutToAppear() {
this.chatListModel.fetChatList();
}
build() {
List() {
ForEach(
this.chatListModel.chatItems,
(chatItem: ChatItemModel) => {
ListItem() {
Text(chatItem.content)
.margin({ left: 20, right: 20 })
}
.height(60)
.width('100%')
},
(chatItem: ChatItemModel): string => {
return chatItem.id_;
})
}
.height('100%')
.width('100%')
}
}
HarmonyOS
赞
收藏 0
回答 2
待解决
相关问题
Foreach循环渲染,数据源改变时的重复渲染
984浏览 • 1回复 待解决
HarmonyOS IDataSource数据源刷新后,列表为不刷新
334浏览 • 1回复 待解决
焦点事件onBlur/onFocus回调无法触发
1998浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
701浏览 • 1回复 待解决
HarmonyOS 长按事件,触发之后的Repeat,无法设置回调间隔
272浏览 • 1回复 待解决
OpenHarmony idl如何实现异步回调?
4672浏览 • 1回复 待解决
HarmonyOS IDataSource支持数据源整体一次替换
602浏览 • 1回复 待解决
HarmonyOS 解析Json数据添加到数据源不刷新UI
557浏览 • 2回复 待解决
HarmonyOS LazyForEach修改数据源不刷新问题
541浏览 • 1回复 待解决
#鸿蒙通关秘籍# 使用ArkUI在HarmonyOS NEXT中创建轮播图组件时,如何管理和更新数据源?
90浏览 • 0回复 待解决
如何解决使用foreach&lazyforeach循环渲染时,会出现更改数据源时,界面不刷新的问题
876浏览 • 1回复 待解决
使用foreach&lazyforeach循环渲染时,会出现更改数据源时,界面不刷新的情况。如何解决
2345浏览 • 1回复 待解决
Web组件隐私模式下如何以回调方式异步获取隐私模式下指定源的地理位置权限状态。
311浏览 • 1回复 待解决
onUnhandledException与onException回调分别什么时候触发
1787浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何管理HarmonyOS NEXT中轮播图的数据源?
102浏览 • 1回复 待解决
嵌套Class的属性变化无法触发UI渲染
269浏览 • 1回复 待解决
如何更新页面列表数据
6930浏览 • 1回复 待解决
关于使用foreach&lazyforeach更改数据源界面不刷新的问题
1079浏览 • 2回复 待解决
当网络请求的数据源对象的内容发生变更后,所有图片都会一闪而过;如果数据源的内容没变,就不会发生
356浏览 • 1回复 待解决
HarmonyOS XComponent注册dispatchTouchEvent无法收到回调
323浏览 • 1回复 待解决
HarmonyOS 关于NAPI开发C层实现异步化回调问题
531浏览 • 1回复 待解决
hiAppEvent.addWatcher订阅崩溃事件重启后onReceive回调没有触发
2068浏览 • 1回复 待解决
HarmonyOS ArkTS开发中,异步回调,怎么切到主线程执行呢
667浏览 • 1回复 待解决
可否在应用启动时不触发onVisibleAreaChange的回调,仅在组件有变化时触发
2094浏览 • 1回复 待解决
目前toggle组件响应点击之后会立刻渲染且立刻回调,如何延迟改变toggle状态且延时回调
528浏览 • 1回复 待解决
ArkUI无法监听对象中数组属性的push变化,可以通过设置该数组对象触发UI界面刷新。
示例代码
问题可能出在列表渲染时数据源更新的时机。由于
setTimeout
是异步操作,它会在2秒后执行fetChatList
方法,而在这段时间内,列表已经被渲染完成,此时数据源chatItems
中还没有数据,因此无法触发列表的重新渲染。为了解决这个问题,您可以在数据源更新后手动触发列表的重新渲染。一种简单的方法是在
setTimeout
的回调函数中添加一行代码来通知应用程序数据已经更新,需要重新渲染列表。这可以通过使用状态管理工具或类似的机制来实现。另外,您也可以考虑使用React Hooks中的
useState
和useEffect
来管理数据和副作用,这样可以更方便地处理数据更新和重新渲染列表的逻辑。下面是一个简单的示例代码,演示如何使用React Hooks中的
useState
和useEffect
来处理数据更新和重新渲染列表的逻辑:在这个示例中,我们使用
useState
来定义chatItems
状态,用于存储聊天列表数据。在fetchChatList
函数中,通过setTimeout
模拟异步获取数据,并在数据获取后使用setChatItems
更新chatItems
状态。然后使用useEffect
来在组件挂载时调用fetchChatList
函数获取数据。最后,在返回的JSX中,我们使用
map
方法遍历chatItems
数组,渲染每个聊天项的内容。