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

zbw_apple

2024-10-21 11:14:29

浏览

回答 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)  
  }  
}

2024-10-21 15:12:26

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS UI 未刷新问题

订阅鸿蒙技术特刊，精选内容抢先看