HarmonyOS UI 未刷新问题

@State 声明的 viewModel 中通过 eventHub 接收事件后修改 status 的值,UI 未刷新。

@Entry  
@Component  
struct StatusPage {  
  @State viewModel: ViewModel = new ViewModel()  
  
  aboutToAppear(): void {  
    this.viewModel.aboutToAppear(getContext(this))  
  }  
  
  build() {  
    Column({ space: 10 }) {  
      Text(this.viewModel.status)  
    }  
    .width('100%').height('100%')  
    .justifyContent(FlexAlign.Center)  
  }  
}  
  
@Observed  
class ViewModel {  
  status: string = '0'  
  
  aboutToAppear(context: Context): void {  
    context.eventHub.on('SyncText', this.syncText)  
  
    this.status = '1'  
  
    // setTimeout(() => {  
    //   console.log('------修改前', this.status)  
    //   this.status = '3'  
    //   console.log('------修改后', this.status)  
    // }, 5000)  
  
    setTimeout(() => {  
      context.eventHub.emit('SyncText', { text: '2' })  
    }, 2000)  
  }  
  
  syncText = (data: ESObject) => {  
    console.log('------receive syncText', data.text)  
    console.log('------修改前', this.status)  
    this.status = data.text  
    console.log('------修改后', this.status)  
  }  
}
HarmonyOS
2024-10-21 11:14:29
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

具体原因请参考:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-state-0000001774279614-V5#ZH-CN_TOPIC_0000001834459288__%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E6%94%B9%E5%8F%98%E7%8A%B6%E6%80%81%E5%8F%98%E9%87%8F%E6%9C%AA%E7%94%9F%E6%95%88

@Entry  
@Component  
struct StatusPageLJ {  
  @State viewModel: ViewModelJ = new ViewModelJ()  
  
  aboutToAppear(): void {  
    this.viewModel.aboutToAppear(getContext(this), this.viewModel)  
  }  
  
  build() {  
    Column({ space: 10 }) {  
      Text(this.viewModel.status)  
    }  
    .width('100%').height('100%')  
    .justifyContent(FlexAlign.Center)  
  }  
}  
  
@Observed  
class ViewModelJ {  
  status: string = '0'  
  
  aboutToAppear(context: Context, self: ViewModelJ): void {  
    context.eventHub.on('SyncText', this.syncText)  
  
    this.status = '1'  
  
    // setTimeout(() => {  
    // console.log('------修改前', this.status)  
    // this.status = '3'  
    // console.log('------修改后', this.status)  
    // }, 5000)  
  
    setTimeout(() => {  
      context.eventHub.emit('SyncText', { text: '2', self: self })  
    }, 2000)  
  }  
  
  syncText = (data: ESObject) => {  
    console.log('------receive syncText', data.text)  
    console.log('------修改前', this.status)  
    data.self.status = data.text  
    console.log('------修改后', this.status)  
  }  
}

该问题根因还是因为修改对象内容,修改未被代理到。如下Demo中,通过断点可以发现,syncText1中的this是不带有proxy的,syncText中的this是带有proxy的。syncText1相当于在构造对象的时候就被执行了,类似于“在构造函数中对成员变量进行赋值和修改”,此修改是不会经过代理的,也就无法被观测到。

@Entry  
@Component  
struct StatusPage {  
  @State viewModel: ViewModel = new ViewModel()  
  
  aboutToAppear(): void {  
    this.viewModel.aboutToAppear(getContext(this))  
  }  
  
  build() {  
    Column({ space: 10 }) {  
      Text(this.viewModel.status)  
    }  
    .width('100%').height('100%')  
    .justifyContent(FlexAlign.Center)  
  }  
}  
  
@Observed  
class ViewModel {  
  status: string = '0'  
  
  aboutToAppear(context: Context): void {  
    this.syncText = (data: ESObject) => {  
      console.log("[syncText] this:" + this)  
    }  
    context.eventHub.on('SyncText', this.syncText)  
    context.eventHub.on('SyncText1', this.syncText1)  
    this.status = '1'  
    setTimeout(() => {  
      context.eventHub.emit('SyncText', { text: '2' })  
      context.eventHub.emit('SyncText1', { text: '2' })  
    }, 2000)  
  }  
  
  syncText ?: (data: ESObject) => void  
  syncText1 ? = (data: ESObject) => {  
    console.log("[syncText1] this:" + this)  
  }  
}
分享
微博
QQ
微信
回复
2024-10-21 15:12:26
相关问题
HarmonyOS @Builder UI刷新问题
36浏览 • 1回复 待解决
HarmonyOS UI刷新问题
30浏览 • 1回复 待解决
HarmonyOS 页面刷新问题
339浏览 • 1回复 待解决
HarmonyOS 列表刷新问题
659浏览 • 1回复 待解决
HarmonyOS 组件刷新问题
81浏览 • 1回复 待解决
HarmonyOS webview刷新问题
48浏览 • 2回复 待解决
HarmonyOS 数据刷新问题
103浏览 • 1回复 待解决
HarmonyOS 页面数据刷新问题
39浏览 • 1回复 待解决
HarmonyOS ForEach列表刷新问题
83浏览 • 1回复 待解决
HarmonyOS List item 刷新问题
817浏览 • 1回复 待解决
NativeWindowFlushBuffer接口刷新问题
2020浏览 • 1回复 待解决
HarmonyOS 页面跳转刷新问题
950浏览 • 1回复 待解决
HarmonyOS swiper数据刷新问题
42浏览 • 1回复 待解决
HarmonyOS 组件的下拉刷新问题
512浏览 • 1回复 待解决
HarmonyOS使用Refresh下拉刷新问题
941浏览 • 1回复 待解决
HarmonyOS 装饰器不刷新问题
235浏览 • 1回复 待解决
HarmonyOS 自定义弹窗刷新问题
73浏览 • 1回复 待解决
HarmonyOS 二维数组刷新问题
341浏览 • 1回复 待解决
HarmonyOS ForEach创建的视图刷新问题
44浏览 • 1回复 待解决
HarmonyOS LazyForEach问题刷新UI问题
71浏览 • 1回复 待解决
HarmonyOS 状态变量不刷新问题
518浏览 • 1回复 待解决