异步回调更新数据源,无法触发列表渲染
问题代码
// 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循环渲染,数据源改变时的重复渲染
399浏览 • 1回复 待解决
焦点事件onBlur/onFocus回调无法触发
890浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
219浏览 • 1回复 待解决
OpenHarmony idl如何实现异步回调?
3440浏览 • 1回复 待解决
使用foreach&lazyforeach循环渲染时,会出现更改数据源时,界面不刷新的情况。如何解决
951浏览 • 1回复 待解决
onUnhandledException与onException回调分别什么时候触发
876浏览 • 1回复 待解决
如何解决使用foreach&lazyforeach循环渲染时,会出现更改数据源时,界面不刷新的问题
272浏览 • 1回复 待解决
如何更新页面列表数据
5703浏览 • 1回复 待解决
目前toggle组件响应点击之后会立刻渲染且立刻回调,如何延迟改变toggle状态且延时回调
40浏览 • 1回复 待解决
hiAppEvent.addWatcher订阅崩溃事件重启后onReceive回调没有触发
835浏览 • 1回复 待解决
可否在应用启动时不触发onVisibleAreaChange的回调,仅在组件有变化时触发
961浏览 • 1回复 待解决
使用@Watch监听并在回调函数中调用其他异步接口时UI响应慢
1071浏览 • 1回复 待解决
通过Redis作为中间缓存,Redis数据更新后再通过消息机制异步更新数据库,这样可行吗?
1296浏览 • 1回复 待解决
RichEditor无法从onPaste回调中获取粘贴的文本信息
733浏览 • 1回复 待解决
字段资源转换在aboutToAppear()中,但是切换中英文后,相关的字段没有及时更新渲染,应该如何触发重新渲染
683浏览 • 1回复 待解决
interface回调如何调用
510浏览 • 1回复 待解决
多个手势连续识别时,第一个手势不触发onActionEnd回调
771浏览 • 1回复 待解决
卡片开发模式,卡片更新时,数据量稍大些,无法更新
6004浏览 • 1回复 待解决
设置新数据后,界面未更新,通过滑动界面能触发其界面更新。数据其实已经设置成功
397浏览 • 1回复 待解决
Emitter如何声明回调函数类型
685浏览 • 1回复 待解决
WebView页面加载错误回调能力。
384浏览 • 1回复 待解决
如何实现拍照预览onPreviewFrame回调
237浏览 • 1回复 待解决
组件设置visibility属性的回调
91浏览 • 2回复 待解决
Native侧获取env具有线程限制,如何在C++子线程触发ArkTS侧回调
954浏览 • 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
数组,渲染每个聊天项的内容。