异步回调更新数据源,无法触发列表渲染
问题代码
// 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
待解决
相关问题
焦点事件onBlur/onFocus回调无法触发
265浏览 • 1回复 待解决
OpenHarmony idl如何实现异步回调?
2673浏览 • 1回复 待解决
使用foreach&lazyforeach循环渲染时,会出现更改数据源时,界面不刷新的情况。如何解决
213浏览 • 1回复 待解决
onUnhandledException与onException回调分别什么时候触发
243浏览 • 1回复 待解决
可否在应用启动时不触发onVisibleAreaChange的回调,仅在组件有变化时触发
332浏览 • 1回复 待解决
如何更新页面列表数据
4994浏览 • 1回复 待解决
使用@Watch监听并在回调函数中调用其他异步接口时UI响应慢
282浏览 • 1回复 待解决
多个手势连续识别时,第一个手势不触发onActionEnd回调
290浏览 • 1回复 待解决
通过Redis作为中间缓存,Redis数据更新后再通过消息机制异步更新数据库,这样可行吗?
648浏览 • 1回复 待解决
支付成功后没有收到回调?
147浏览 • 1回复 待解决
服务卡片点击触发的路由到Ability的onForeground回调获取到的intent不是最新的
3718浏览 • 1回复 待解决
Native侧获取env具有线程限制,如何在C++子线程触发ArkTS侧回调
274浏览 • 1回复 待解决
如何为 C++ 提供回调函数?
564浏览 • 1回复 待解决
卡片开发模式,卡片更新时,数据量稍大些,无法更新
5403浏览 • 1回复 待解决
如何实现crash堆栈抓取、crash回调
146浏览 • 1回复 待解决
taskpool任务执行结束后如何执行回调方法
227浏览 • 1回复 待解决
相机是否支持拍照预览onPreviewFrame回调?是否支持控制回调频率?
288浏览 • 1回复 待解决
NAPI执行上层回调时,如何获取env
205浏览 • 1回复 待解决
鸿蒙 有((ComponentContainer) view).addComponent() 后的回调方法吗
4329浏览 • 1回复 待解决
在接口内定义匿名回调的语法
14浏览 • 0回复 待解决
callback无法成功更新UI
154浏览 • 1回复 待解决
AceInternalAbility 使用PA端拉起 系统相册 怎么回去回调?
4680浏览 • 1回复 待解决
Ability的生命周期回调函数有哪些呢?
3536浏览 • 1回复 待解决
键盘拉起时列表无法上下滑动
241浏览 • 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
数组,渲染每个聊天项的内容。